web-dev-qa-db-fra.com

Comment rendre le contenu principal div remplir la hauteur de l'écran avec css

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 (remplissez 100% entre le pied de page et l'en-tête). Mon pied de page correspond à la position absolue avec le bas: 0. Chaque fois que j'essaie de régler le corps principal à 100% de la hauteur ou de changer de position, cela changera également déborder de l'en-tête. Si vous définissez le corps en position absolue avec top: 40 (car mon en-tête a une hauteur de 40 pixels), il sera tout simplement trop bas pour créer une barre de défilement de 40 pixels.

J'ai créé un simple fichier html car je ne peux pas publier la page/css entière du projet actuel. Avec l'exemple de code, même si le corps du contenu principal remplit l'écran, il va trop loin vers le haut de 40 pixels (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?

javascripthtmlcss
69
user2713516
  • aucune hauteur en% n'est nécessaire
  • pas besoin de jQuery

(!) stretch div en utilisant bottom & top:

.mainbody{
       position: absolute;
       top: 40px; /* Header Height */
       bottom: 20px; /* Footer Height */
       width: 100%;
    }

vérifier mon code: http://jsfiddle.net/aslancods/mW9WF/

109
sudhan kantharuban

Pas de Javascript, pas de positionnement absolu et pas de hauteur fixe requise pour celui-ci.

Voici une méthode entièrement CSS/CSS qui ne nécessite pas de hauteur fixe ni de positionnement absolu :

CSS

.container { 
  display: table;
}
.content { 
  display: table-row; 
  height: 100%; 
}
.content-body { 
  display: table-cell;
}

HTML

<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

Voir en action ici: http://jsfiddle.net/AzLQY/

L'avantage de cette méthode est que le pied de page et l'en-tête peuvent s'agrandir pour correspondre à leur contenu et que le corps s'ajuste automatiquement. Vous pouvez également choisir de limiter leur hauteur avec css.

59
Mark Murphy

Il existe une unité CSS appelée hauteur de fenêtre/largeur de fenêtre.

Exemple

.mainbody{height: 100vh;} Similairement html,body{width: 100vw;}

ou 90vh = 90% de la hauteur de la fenêtre.

** IE9 + et la plupart des navigateurs modernes.

46
joyBlanks

Cela permet à un corps de contenu centré avec une largeur minimale pour que mes formulaires ne s'effondrent pas de façon amusante:

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

Et ma page de mise en page ressemble à:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Exemple ici: http://data.nwtresearch.com/

Une autre remarque, si vous voulez que l’arrière-plan de la page complète ressemble au code que vous avez ajouté, supprimez le height: auto !important; du wrapper div: http://jsfiddle.net/mdares/a8VVw/

5
Matthew

En utilisant top: 40px et bottom: 40px (en supposant que votre pied de page est également de 40 pixels) sans hauteur définie, vous pouvez le faire fonctionner.

.header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

JSFiddle

3
Tricky12

Les valeurs relatives telles que: height: 100% utiliseront l'élément parent en HTML comme une référence. Pour utiliser des valeurs relatives en hauteur, vous aurez besoin de faire en sorte que vos balises html et body aient une hauteur de 100% comme celle-ci:

HTML

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

CSS

html, body
{
    height: 100%;
}

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

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

1
Adriano Moura

Vous ne savez pas exactement ce que vous voulez, mais je pense que je comprends.

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

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

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

Balisage:

<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 que cela fonctionne mieux, je suggère d'utiliser% au lieu de pixels, car vous rencontrerez des problèmes avec différentes tailles d'écran/de périphérique.

1
TyMayn

Eh bien, il existe différentes implémentations pour différents navigateurs.

Dans mon esprit, la solution la plus simple et la plus élégante consiste à utiliser CSS calc (). Malheureusement, cette méthode est indisponible dans les versions ie8 et inférieures et également dans les navigateurs Android et l'opéra mobile. Si vous utilisez des méthodes distinctes pour cela, vous pouvez toutefois essayer ceci: http://jsfiddle.net/uRskD/

Le balisage:

<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 solution secondaire implique la méthode du pied collant et le dimensionnement de la boîte. Cela permet essentiellement à 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 consiste à utiliser jQuery pour définir la hauteur minimale de la zone de contenu principale. 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);
});
1
Chad

Bien que cela puisse sembler une question facile, mais ce n’est pas le cas!

J'ai essayé beaucoup de choses pour réaliser ce que vous essayez de faire avec du CSS pur et tous mes essais ont été un échec. 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 ayez ce code 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>

Remarque: je n'utilise pas le positionnement absolu dans cette solution, car elle pourrait paraître laide dans les navigateurs mobiles.

0
evilReiko