Faire un div remplir la hauteur de l'écran restant
Je travaille sur une application Web sur laquelle je souhaite que le contenu occupe toute la hauteur de l'écran.
La page a un en-tête, qui contient un logo et des informations de compte. Cela pourrait être une hauteur arbitraire. Je veux que le contenu div remplisse le reste de la page vers le bas.
J'ai un en-tête div et un contenu div. Pour le moment, j'utilise une table pour la mise en page comme ceci:
CSS et HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>Toute la hauteur de la page est remplie et aucun défilement n'est requis.
Pour tout ce qui se trouve à l'intérieur de la div content, régler top: 0; le placera juste sous l'en-tête. Parfois, le contenu sera une vraie table, avec une hauteur de 100%. Mettre header dans content ne permettra pas que cela fonctionne.
Existe-t-il un moyen d'obtenir le même effet sans utiliser le paramètre table?
Mise à jour:
Les éléments contenus dans le contenu div auront également une hauteur définie en pourcentage. Donc, quelque chose à 100% dans la div le remplira au fond. De même que deux éléments à 50%.
Mise à jour 2:
Par exemple, si l'en-tête occupe 20% de la hauteur de l'écran, une table spécifiée à 50% dans #content occupera 40% de l'espace de l'écran. Jusqu'à présent, la seule chose qui fonctionne consiste à envelopper tout le contenu dans une table.
Mise à jour 2015: l'approche flexbox
Il existe deux autres réponses mentionnant brièvement flexbox ; cependant, c'était il y a plus de deux ans et ils ne fournissent aucun exemple. La spécification de flexbox est maintenant définitivement établie.
Remarque: Bien que la spécification de disposition des boîtes flexibles CSS en soit à l'étape de la recommandation du candidat, elle n'a pas été mise en œuvre par tous les navigateurs. L'implémentation WebKit doit être précédée de -webkit-; Internet Explorer implémente une ancienne version de la spécification, préfixée par -ms-; Opera 12.10 implémente la dernière version de la spécification, sans préfixe. Consultez le tableau de compatibilité de chaque propriété pour obtenir un statut de compatibilité à jour.
(extrait de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )
Tous les principaux navigateurs et IE11 + prennent en charge Flexbox. Pour IE 10 ou une version antérieure, vous pouvez utiliser le module FlexieJS.
Pour vérifier le support actuel, vous pouvez également voir ici: http://caniuse.com/#feat=flexbox
Exemple de travail
Avec flexbox, vous pouvez facilement basculer entre vos lignes et vos colonnes, que ce soit avec des dimensions fixes, des dimensions de la taille du contenu ou des dimensions d'espace restant. Dans mon exemple, j'ai paramétré l'en-tête pour qu'il s'aligne sur son contenu (conformément à la question des OP), j'ai ajouté un pied de page pour montrer comment ajouter une région à hauteur fixe, puis configurer la zone de contenu pour remplir l'espace restant.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>Dans la CSS ci-dessus, la propriété flex raccourcit les flex-grow , flex-shrink , et flex-base propriétés pour établir la flexibilité des éléments flexibles. Mozilla a un bonne introduction au modèle des boîtes flexibles .
Il n’existe vraiment pas de méthode efficace, multi-navigateur, pour le faire en CSS. En supposant que votre mise en page présente des complexités, vous devez utiliser JavaScript pour définir la hauteur de l'élément. L'essence de ce que vous devez faire est la suivante:
Element Height = Viewport height - element.offset.top - desired bottom margin
Une fois que vous pouvez obtenir cette valeur et définir la hauteur de l'élément, vous devez associer des gestionnaires d'événements à la fenêtre onload et à onresize afin de pouvoir activer votre fonction de redimensionnement.
En outre, en supposant que votre contenu puisse être plus volumineux que la fenêtre d'affichage, vous devez définir overflow-y pour le défilement.
Le message original date de plus de 3 ans. Je suppose que beaucoup de gens qui viennent à ce poste comme moi cherchent une solution de mise en page semblable à une application, par exemple un en-tête, un pied de page et un contenu en hauteur fixes prenant la place de l'écran de repos. Si tel est le cas, cet article peut aider, il fonctionne sur IE7 +, etc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Et voici quelques extraits de ce post:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>Approche CSS uniquement (si la hauteur est connue/fixe)
Lorsque vous souhaitez que l'élément central s'étende verticalement sur toute la page, vous pouvez utiliser calc() , qui est introduit dans CSS3.
En supposant que nous ayons des éléments de hauteur fixe header et footer et que nous souhaitons que la balise section prenne toute la hauteur verticale disponible ...
Balisage supposé
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Donc, votre CSS devrait être
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Donc, voici ce que je fais, c'est additionner la hauteur des éléments et déduire de 100% en utilisant la fonction calc().
Assurez-vous simplement que vous utilisez height: 100%; pour les éléments parents.
Utilisé: height: calc(100vh - 110px);
code:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>Et si vous utilisiez simplement vh qui signifie view height dans CSS ...
Regardez l'extrait de code que j'ai créé pour vous ci-dessous et exécutez-le:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>Regardez aussi l'image ci-dessous que j'ai créée pour vous:
CSS3 Simple Way
height: calc(100% - 10px); // 10px is height of your first div...
de nos jours, tous les principaux navigateurs le prennent en charge, alors n'hésitez pas si vous n'êtes pas obligé de prendre en charge les navigateurs anciens.
Une solution simple, utilisant flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>ne solution alternative, avec un div centré dans le contenu div
Cela pourrait être fait uniquement par CSS en utilisant vh:
#page {
display:block;
width:100%;
height:95vh !important;
overflow:hidden;
}
#tdcontent {
float:left;
width:100%;
display:block;
}
#content {
float:left;
width:100%;
height:100%;
display:block;
overflow:scroll;
}
et le HTML
<div id="page">
<div id="tdcontent"></div>
<div id="content"></div>
</div>
Je l'ai vérifié, cela fonctionne dans tous les principaux navigateurs: Chrome, IE et FireFox
Aucune des solutions publiées ne fonctionne lorsque vous avez besoin que la div du bas défile lorsque le contenu est trop haut. Voici une solution qui fonctionne dans ce cas:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Je cherchais une réponse à cette question également. Si vous avez la chance de pouvoir cibler IE8 et les versions ultérieures, vous pouvez utiliser display:table et les valeurs associées pour obtenir les règles de rendu des tables avec des éléments de niveau bloc, y compris div.
Si vous avez encore plus de chance et que vos utilisateurs utilisent des navigateurs de premier plan (par exemple, s'il s'agit d'une application intranet sur les ordinateurs que vous contrôlez, comme c'est le cas de mon dernier projet), vous pouvez utiliser le nouveau Disposition de boîte flexible = en CSS3!
Ce qui a fonctionné pour moi (avec une div dans une autre div et je suppose dans toutes les autres circonstances) est de régler le remplissage inférieur à 100%. C'est-à-dire, ajoutez ceci à votre css/feuille de style:
padding-bottom: 100%;
Disclaimer: La réponse acceptée donne une idée de la solution, mais je la trouve un peu surchargée avec un wrapper inutile et des règles CSS. Vous trouverez ci-dessous une solution avec très peu de règles CSS.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
La solution ci-dessus utilise nités de la fenêtre d'affichage et flexbox , et est donc IE10 +, à condition que vous utilisiez l'ancienne syntaxe pour IE10.
Codepen pour jouer avec: lien vers codepen
Ou celui-ci, pour ceux qui ont besoin de faire défiler le conteneur principal en cas de contenu débordant: lien vers codepen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Dans tous les navigateurs sûrs, vous pouvez mettre le "en-tête" div avant le contenu, en tant que frère, et le même CSS fonctionnera. Cependant, IE7- n'interprète pas correctement la hauteur si le float est 100% dans ce cas, l'en-tête doit donc être dans le contenu, comme ci-dessus. Le débordement: auto provoquera une double barre de défilement sur IE (la barre de défilement de la fenêtre de visualisation étant toujours visible, mais désactivée), mais sans elle, le contenu sera vidé s'il déborde.
Il y a une tonne de réponses maintenant, mais j'ai trouvé utiliser height: 100vh; pour travailler sur l'élément div qui doit remplir tout l'espace vertical disponible.
De cette façon, je n'ai pas besoin de jouer avec l'affichage ou le positionnement. Cela s'est avéré pratique lorsque vous avez utilisé Bootstrap pour créer un tableau de bord dans lequel j'avais une barre latérale et un élément principal. Je voulais que l’élément principal s’étende et remplisse tout l’espace vertical de manière à pouvoir appliquer une couleur de fond.
div {
height: 100vh;
}
Supporte IE9 et plus: cliquez pour voir le lien
J'ai lutté avec cela pendant un moment et j'ai fini avec ce qui suit:
Puisqu'il est facile de rendre le contenu DIV à la même hauteur que le parent mais apparemment difficile d'en faire la hauteur du parent moins la hauteur de l'en-tête, j'ai décidé de faire en sorte que le contenu soit divisé en hauteur, mais le positionner absolument dans le coin supérieur gauche, puis définir un remplissage. pour le sommet qui a la hauteur de l'en-tête. De cette façon, le contenu s'affiche proprement sous l'en-tête et remplit tout l'espace restant:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Si vous ne pouvez pas gérer les anciens navigateurs (c'est-à-dire MSIE 9 ou plus ancien), vous pouvez le faire avec module de présentation de boîte flexible , qui correspond déjà à W3C CR. Ce module permet également d’autres astuces de Nice, telles que la réorganisation du contenu.
Malheureusement, MSIE 9 ou moins ne prend pas cela en charge et vous devez utiliser le préfixe du fournisseur pour la propriété CSS pour tous les navigateurs autres que Firefox. Espérons que les autres fournisseurs suppriment bientôt le préfixe également.
Un autre choix serait CSS Grid Layout mais cela est encore moins supporté par les versions stables des navigateurs. En pratique, seul MSIE 10 le supporte.
Pourquoi pas comme ça?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Vous donner du html et du corps (dans cet ordre) une hauteur, puis juste une hauteur pour vos éléments?
Travaille pour moi
style="height:100vh"
résolu le problème pour moi. Dans mon cas, j'ai appliqué cela à la div requis
Il suffit de définir la body avec display:grid et le grid-template-rows à l'aide de auto et de la propriété fr value.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>Vous pouvez réellement utiliser display: table pour scinder la zone en deux éléments (en-tête et contenu), l'en-tête pouvant varier en hauteur et le contenu occupant tout l'espace restant. Cela fonctionne avec la page entière, ainsi que lorsque la zone est simplement le contenu d'un autre élément positionné avec position réglé sur relative, absolute ou fixed. Cela fonctionnera tant que l'élément parent aura une hauteur non nulle.
Voir ce violon et aussi le code ci-dessous:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Vincent, je vais répondre à nouveau en utilisant vos nouvelles exigences. Puisque vous ne vous souciez pas du contenu caché s'il est trop long, vous n'avez pas besoin de faire flotter l'en-tête. Il suffit de mettre le débordement masqué sur les balises html et body, et définissez #content height à 100%. Le contenu sera toujours plus long que la fenêtre d'affichage de la hauteur de l'en-tête, mais il sera masqué et ne causera pas de barres de défilement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Essaye ça
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
J'ai trouvé une solution assez simple car, pour moi, il ne s'agissait que d'un problème de conception. Je voulais que le reste de la page ne soit pas blanc au-dessous du pied rouge. Je règle donc la couleur de fond des pages en rouge. Et le contenu backgroundcolor au blanc. Avec la hauteur du contenu réglée sur par exemple. 20em ou 50% une page presque vide ne laissera pas toute la page en rouge.
Pour les applications mobiles, je n'utilise que VH et VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Décoller l'idée de M. Alien ...
Cela semble être une solution plus propre que celle du populaire Flex Box pour les navigateurs compatibles CSS3.
Utilisez simplement min-height (au lieu de height) avec calc () pour le bloc de contenu.
Le calcul () commence par 100% et soustrait la hauteur des en-têtes et des pieds de page (il est nécessaire d'inclure les valeurs de remplissage)
Utiliser "min-height" au lieu de "height" est particulièrement utile, car il peut fonctionner avec du contenu restitué en javascript et des frameworks JS comme Angular2. Sinon, le calcul ne poussera pas le pied de page au bas de la page une fois que le contenu rendu en javascript est visible.
Voici un exemple simple d'en-tête et de pied de page utilisant une hauteur de 50 pixels et un remplissage de 20 pixels pour les deux.
Html:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Bien sûr, les calculs peuvent être simplifiés, mais vous avez l’idée ...
J'ai eu le même problème mais je ne pouvais pas faire fonctionner la solution avec les flexbox ci-dessus. J'ai donc créé mon propre modèle, qui comprend:
- un en-tête avec un élément de taille fixe
- un pied de page
- une barre latérale avec une barre de défilement qui occupe la hauteur restante
- contenu
J'ai utilisé des boîtes flexibles mais d'une manière plus simple, en utilisant uniquement les propriétés display: flex et flex-direction: row | colonne :
J'utilise bien angular et je veux que la taille de mes composants soit égale à 100% de leur élément parent.
La clé est de définir la taille (en pourcentage) de tous les parents afin de limiter leur taille. Dans l'exemple suivant, myapp height a 100% de la fenêtre d'affichage.
Le composant principal contient 90% de la fenêtre d'affichage, car les en-têtes et les pieds de page en ont 5%.
J'ai posté mon modèle ici: https://jsfiddle.net/abreneliere/mrjh6y2e/
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
C'est dynamique calcule l'espace restant sur l'écran, mieux en utilisant Javascript.
Vous pouvez utiliser la technologie CSS-IN-JS, comme ci-dessous lib: