123 votes

user2713516 avatar

Comment faire en sorte que le div de contenu principal remplisse la hauteur de l'écran avec css ?

Demandé el 6 de Septembre, 2013
Quand la question a-t-elle été
306175 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai donc une page Web avec un en-tête, un corps principal et un pied de page. Je veux que le corps principal remplisse 100 % de la page (100 % entre le pied de page et l'en-tête). Mon pied de page est en position absolue avec un fond de 0 : Chaque fois que j'essaie de définir la hauteur du corps principal à 100 % ou de modifier sa position, il déborde également de l'en-tête. Si je règle le corps en position absolue avec top: 40 (parce que mon en-tête fait 40px de haut), il ira 40px trop bas, créant une barre de défilement.

J'ai créé un simple fichier html puisque je ne peux pas afficher la page complète du projet actuel. Avec l'exemple de code, même si le corps du contenu principal remplit l'écran, il descend de 40px trop bas (à cause de l'en-tête, je suppose).

html,
body {
  margin: 0;
  padding: 0;
}

header {
  height: 40px;
  width: 100%;
  background-color: blue;
}

#maincontent {
  background-color: green;
  height: 100%;
  width: 100%;
}

footer {
  height: 40px;
  width: 100%;
  background-color: grey;
  position: absolute;
  bottom: 0;
}

<html>

<head>
  <title>test</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <div id="maincontent">

  </div>

  <footer></footer>
</body>

</html>

Quelqu'un connaît la réponse ?

Demandé el 6 de Septembre, 2013 par user2713516

Réponses

Trop de publicités?

3voto

Chad avatar
Chad Points 2545

Il existe différentes implémentations pour différents navigateurs.

À mon avis, la solution la plus simple et la plus élégante consiste à utiliser CSS calc(). Malheureusement, cette méthode n'est pas disponible dans ie8 et moins, et ne l'est pas non plus dans les navigateurs Android et opéra mobile. Si vous utilisez des méthodes distinctes pour cela, vous pouvez toutefois essayer ceci : http://jsfiddle.net/uRskD/

La majoration :

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

Et le CSS :

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

Ma deuxième solution fait appel à la méthode du pied de page collant et à la taille des boîtes. Cette méthode permet à l'élément body de remplir 100 % de la hauteur de son parent, et inclut le remplissage dans ce 100 % avec box-sizing: border-box; . http://jsfiddle.net/uRskD/1/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

Ma troisième méthode serait d'utiliser jQuery pour définir la hauteur minimale de la zone de contenu principal. http://jsfiddle.net/uRskD/2/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

Et le JS :

$(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});
Répondu el 6 de Septembre, 2013 par Chad (2545 Points )

1voto

TyMayn avatar
TyMayn Points 286

Je ne sais pas exactement ce que vous cherchez, mais je crois que j'ai compris.

Un en-tête - reste en haut de l'écran ? Un pied de page - reste en bas de l'écran ? Zone de contenu -> occupe l'espace entre le pied de page et l'en-tête ?

Vous pouvez le faire par un positionnement absolu ou par un positionnement fixe.

Voici un exemple avec un positionnement absolu : http://jsfiddle.net/FMYXY/1/

Markup :

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS :

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

Pour un fonctionnement optimal, je vous suggère d'utiliser des % plutôt que des pixels, car vous rencontrerez des problèmes avec les différentes tailles d'écran/appareils.

Répondu el 6 de Septembre, 2013 par TyMayn (286 Points )

1voto

Adriano Moura avatar
Adriano Moura Points 39

Les valeurs relatives comme : height:100% utiliseront l'élément parent en HTML comme une référence, pour utiliser des valeurs relatives en hauteur vous devrez faire en sorte que vos balises html et body aient une hauteur de 100% comme cela :

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body
{
    height: 100%;
}

.content
{
    background: red;
    width: 100%;
    height: 100%;
}

http://jsfiddle.net/u91Lav16/1/

Répondu el 19 de Février, 2015 par Adriano Moura (39 Points )

0voto

evilReiko avatar
evilReiko Points 2048

Bien que cela puisse sembler être une question facile, ce n'est pas le cas !

J'ai essayé de nombreuses choses pour réaliser ce que vous essayez de faire avec du CSS pur, et toutes mes tentatives ont échoué. Mais il y a une solution possible si vous utilisez javascript ou jquery !

En supposant que vous ayez ce CSS :

#myheader {
    width: 100%;
}
#mybody {
    width: 100%;
}
#myfooter {
    width: 100%;
}

En supposant que vous avez ce HTML :

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

Essayez ceci avec jquery :

<script>
    $(document).ready(function() {
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
            $('#mybody').height(newBodyHeight);
        }
    });
</script>

Note : Je n'utilise pas le positionnement absolu dans cette solution, car cela pourrait être laid dans les navigateurs mobiles.

Répondu el 6 de Septembre, 2013 par evilReiko (2048 Points )

0voto

fje avatar
fje Points 571

Il existe une solution avec l'attribut css table. Vous n'avez pas besoin de positionnement absolu ou de javascript.

Css :

html, body {height: 100%; padding: 0; margin: 0;}
.layout {display: table; height: 100%; width: 100%; background-color: black;}
.layout > div > div {display: table-cell;}
.header {display: table-header-group; background-color: blue;}
.header > div {height: 40px;}
.main {display: table-row-group; background-color: red;}
.footer {display: table-footer-group; background-color: green;}
.footer > div {height: 40px;}

Html :

<div class="layout">
    <div class="header">
        <div>
        </div>
    </div>
    <div class="main">
        <div>
        </div>
    </div>
    <div class="footer">
        <div>
        </div>
    </div>
</div>

Voici un exemple : Violon

Répondu el 6 de Septembre, 2013 par fje (571 Points )

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X