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

Question

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é
306174 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Faire un div remplir la hauteur du reste de l'espace à l'écran (5 réponses )

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

Answer 1

5 Réponses

Answer 2

144voto

sudhn Points 797

Ceux-ci ne sont pas nécessaires

enlever la hauteur en %.
supprimer jQuery

Étirer la division en utilisant le bas et le haut :

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

Vérifiez mon code : http://jsfiddle.net/aslancods/mW9WF/

ou vérifiez ici :

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;

    position: absolute;
    bottom: 0;
    width:100%;
}

<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Hello world</div>
</div>
<div class="footer">
    &nbsp;
</div>

Répondu el 6 de Septembre, 2013 par sudhn (797 Points )

Answer 3

65voto

Mark Murphy Points 355

Celui-ci ne nécessite ni Javascript, ni positionnement absolu, ni hauteurs fixes.

Voici une méthode entièrement CSS / CSS uniquement qui ne nécessite pas de hauteurs fixes ou de positionnement absolu :

/* Reset */

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

/* Essentials */

.container {
  display: table;
}

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

.content-body {
  display: table-cell;
}

/* Aesthetics */

.container {
  width: 100%;
  height: 100%;
}

.header,
.footer {
  padding: 10px 20px;
  background: #f7f7f7;
}

.content-body {
  padding: 20px;
  background: #e7e7e7;
}

<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>

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 à l'aide de css.

Répondu el 8 de Février, 2014 par Mark Murphy (355 Points )

Answer 4

59voto

joyBlanks Points 3592

Il existe une unité CSS appelée viewport height / viewport width.

Exemple

.mainbody{height: 100vh;} de même html,body{width: 100vw;}

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

**IE9+ et la plupart des navigateurs modernes.

Répondu el 19 de Décembre, 2014 par joyBlanks (3592 Points )

Answer 5

9voto

Matthew Points 6447

Cela permet d'avoir un corps de contenu centré avec une largeur minimale pour que mes formulaires ne s'effondrent pas bizarrement :

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 à ça :

<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 dernière remarque, si vous voulez que l'arrière-plan de la page entière ressemble au code que vous avez ajouté, supprimez l'option height: auto !important; de la div wrapper : http://jsfiddle.net/mdares/a8VVw/

Répondu el 6 de Septembre, 2013 par Matthew (6447 Points )

Answer 6

6voto

Tricky12 Points 2812

Utilisation de top: 40px y bottom: 40px (en supposant que votre pied de page est également de 40px) sans hauteur définie, vous pouvez faire en sorte que cela fonctionne.

.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

Répondu el 6 de Septembre, 2013 par Tricky12 (2812 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: