CSS - 100% de la Hauteur de l'en-Tête et Pied de page

Je suis en train de concevoir une page avec un header, une div principale qui s'étend jusqu'à 100% de la verticale du paysage (moins d'en-tête et pied de page) et un pied de page. Comme ce pic:

Je peux obtenir l'en-tête et de la div principale de travail. Comme ceci:

    <div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

Avec ce CSS:

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    background-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    background-color: blue;
}

Donc la div principale commence 40px sur le dessus pour tenir compte de l'en-tête et puis s'arrête 40px de bas compte pour le pied de page. Cela fonctionne bien, mais je n'arrive pas à pied de div à afficher en dessous de la div principale. La façon dont il est maintenant avec position: relative il met le pied sur le dessus de la div principale. Si j'utilise position:absolute il le met en dessous de la div principale.

Je suis sûr que je suis juste le faire tort parce que le CSS n'est pas mon truc.

Toute aide sur ce serait génial.

Grâce

Est-il une raison pourquoi vous avez une position absolue .main_div? Qui sera la ce qui provoque le mauvais positionnement de votre pied de page. Si, au contraire, vous avez "position:relative", puis le pied de page doit s'afficher ci-dessous. -- edit -- Oh, je vois. Jamais l'esprit.

OriginalL'auteur Sequenzia | 2013-06-11

css

2

Utiliser le css calc() fonction.

Avec cette méthode, vous n'avez pas à définir la position des éléments

Ici est un démo

html:
```
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
```
css:
```
html, body { 
    height: 100%
}

body {
    color: #FFF;
    padding: 0;
    margin: 0;
}

header { 
    background-color: #000;
    height: 100px;    
}

main { 
    background-color: #AAA;
    height: calc(100% - 150px);    
}

footer { 
    background-color: #000;
    height: 50px;    
}
```
PS (ne fonctionnera pas avec IE8). Si la position n'est pas d'une extrême question ici. Est qu'il est assez difficile (si ce n'est par l'utilisation de JS) pour rendre le pied de la hauteur dynamique respectifs de contenu de la taille. Un autre moins, c'est que vous avez tenir compte à la fois de l'en-Tête et Pied de page des hauteurs à l'intérieur de la calc. 🙁

OriginalL'auteur FabianW

-1

Voici une méthode simple. Essayez cette jsfiddle: http://jsfiddle.net/PejHr/

HTML:

<div id="top"></div>
<div id="main">
    <div id="inner"></div>
</div>
<div id="bottom"></div>

CSS:

#main {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 50px 0px
}
#inner {
    width: 100%;
    height: 100%;
    background: #f0f;
}

#top, #bottom {
    width: 100%;
    height: 50px;
    background: #333;
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottom {
    bottom: 0px;
}

Votre exemple ne fonctionne pas maintenant. Le pied de page affiché sur le dessus et en-tête de sous la #main.

OriginalL'auteur Michael Lawrie

Vous devez vous connecter pour publier un commentaire.

Utiliser le css calc() fonction.

Ici est un démo