2 divs (remplir toute la page)

J'ai un div horizontalement en haut de ma page avec une hauteur de 50px.2 divs (remplir toute la page)

Et maintenant je veux mettre une autre div juste en dessous qui remplira le reste de page entière (devrait fonctionner avec n'importe quel type de résolution).

Est-ce que quelqu'un sait comment faire cela uniquement avec CSS?

J'apprécierais toute aide. Merci!

Source

2010-04-17 Anonymous

http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space –

Ceci est un exemple d'une mise en page qui est quelque peu problématique avec CSS "pure" mais trivial avec les tables. Premièrement, il n'y a aucun moyen d'exprimer (en ignorant les expressions CSS, que vous avez tendance à vouloir éviter) "reste de la page" ou "100% moins 50px" donc la solution générale à ce problème est.

Créer un conteneur dont la hauteur est égale à 100%;
Mettez l'en-tête à hauteur 50px;
Le contenu prend simplement le reste de l'espace. Tout style est appliqué au conteneur et non au contenu.

Alors:

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div>

avec:

html, body. #container { height: 100%; } 
#container { height: 100%; min-height: 100%; } 
#header { height: 50px; }

Il est plus compliqué si vous voulez un pied de page. Cela est généralement placé absolument au fond et rembourrage est utilisé sur le conteneur de sorte que rien ne se trouve en dessous.

Source

2010-04-17 22:16:47 cletus

La prochaine chose que vous voulez faire est de mettre un div ou quelque chose à l'intérieur le div inférieur, qui repousse l'autre contenu de 50px. –

Bien que cela n'empile pas le div, c'est une solution très simple. Faire un div qui est de 100% de hauteur, puis placez un div à l'intérieur qui est de 50px de hauteur.

<body style="height: 100%; width: 100%;"> 
    <div style="height: 100%; width: 100%;"> 
     <div style="height: 50px; width: 100%;">Header</div> 
     <!--Rest of Content--> 
    </div> 
</body>

Source

2010-04-17 22:23:23

Il existe des façons de procéder. Voici un exemple utilisant le positionnement absolu et un wrapper. Évidemment ignorer les couleurs - ils sont juste là pour que vous puissiez voir ce qui se passe.

<body style="margin: 0;height: 100%; background-color: yellow;"> 
     <div style="background-color: green; height: 50px">top stuff</div> 
     <div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div> 
</body>

Source

2010-04-17 22:31:48 ndp

2 divs (remplir toute la page)

Répondre

Questions connexes