Faire un div remplir la hauteur de l'écran restant
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je travaille sur une application Web où 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 sur le compte. Cela pourrait être une hauteur arbitraire. Je veux que la div de contenu remplisse le reste de la page vers le bas.
J'ai un en-tête div et un contenu top: 0;. Pour le moment, j'utilise un tableau pour la mise en page, comme suit:
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 élément à l'intérieur de la div de contenu, définir header le placera juste sous l'en-tête. Parfois, le contenu sera une vraie table, avec une hauteur de 100%. Mettre content à l'intérieur table ne permettra pas que cela fonctionne.
Existe-t-il un moyen d'obtenir le même effet sans utiliser le #content?
Mise à jour:
Les éléments contenus dans le contenu <=> auront également des hauteurs définies en pourcentage. Donc, quelque chose à 100% à l'intérieur du <=> le remplira jusqu'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% à l'intérieur de <=> occupera 40% de la surface de l'écran. Jusqu'ici, tout ce qui fonctionne dans un tableau est la seule chose qui fonctionne.
La solution
Mise à jour 2015: l'approche Flexbox
Deux autres réponses mentionnent brièvement flexbox ; cependant, c'était il y a plus de deux ans et ils ne fournissent aucun exemple. La spécification pour flexbox est définitivement réglée maintenant.
Remarque: bien que la spécification de mise en page des boîtes flexibles CSS 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 plus ancienne, vous pouvez utiliser la cale 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 l’une de vos lignes ou 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 le CSS ci-dessus, la propriété flex rend le développeur . mozilla.org/en/CSS/flex-grow">flex-grow , flex-shrink propriétés flex-base pour établir la flexibilité des éléments flex. Mozilla a une bonne introduction au modèle des boîtes flexibles .
Autres conseils
En CSS, il n’existe vraiment pas de méthode efficace, multi-navigateurs. 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 l'écran de reste. 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-tmmake-it-easier/
Et voici quelques extraits de ce message:
@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>
Au lieu d'utiliser des tableaux dans le balisage, vous pouvez utiliser des tableaux CSS.
Balisage
<body>
<div>hello </div>
<div>there</div>
</body>
CSS (pertinent)
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Cette méthode présente certains avantages:
1) Moins de majoration
2) Le balisage est plus sémantique que les tableaux, car il ne s'agit pas de données tabulaires.
3) La prise en charge du navigateur est très bonne : IE8 +, tous les navigateurs modernes et appareils mobiles ( caniuse . )
Juste pour compléter, voici les éléments HTML équivalents aux propriétés css du modèle de table CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Approche CSS uniquement (si la hauteur est connue / fixée)
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 à hauteur fixe header et footer, 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>
Votre CSS devrait donc ê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% l’utilisation de la height: 100%; fonction.
Assurez-vous simplement que vous utilisez <=> 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 ce qui signifie view height dans CSS ...
Consultez le fragment 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 également l'image ci-dessous que j'ai créée pour vous:
Méthode simple de CSS3
height: calc(100% - 10px); // 10px is height of your first div...
Tous les principaux navigateurs actuels le supportent, alors n'hésitez pas si vous n'êtes pas obligé de prendre en charge les navigateurs anciens.
Cela pourrait être fait uniquement en CSS 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
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>
Une solution alternative, avec un div centré sur la div de contenu
Aucune des solutions publiées ne fonctionne lorsque vous avez besoin que la division 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 des valeurs connexes pour obtenir les règles de rendu des tables avec des éléments de niveau bloc, y compris div.
Si vous êtes encore plus chanceux 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 dans mon dernier projet), vous pouvez utiliser le nouveau Présentation de la boîte flexible en CSS3!
Ce qui a fonctionné pour moi (avec une division dans une autre division et je suppose dans toutes les autres circonstances) est de définir le remplissage inférieur à 100%. C'est-à-dire, ajoutez ceci à votre css / feuille de style:
padding-bottom: 100%;
Clause de non-responsabilité: 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 les unités de visualisation et flexbox , il s'agit donc d'IE10 +, à condition que vous utilisiez l'ancienne syntaxe d'IE10.
Codepen joue avec: lien vers codepen
Ou celui-ci, pour ceux qui ont besoin de faire défiler le conteneur principal en cas de contenu saturé: 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 rationnels, vous pouvez mettre l’en-tête & "; 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 (qui a toujours la barre de défilement de la fenêtre visible, mais désactivée), mais sans elle, le contenu sera coupé s'il déborde.
Il y a une tonne de réponses maintenant, mais j’ai découvert en utilisant height: 100vh; de travailler sur l’élément div qui doit remplir tout l’espace vertical disponible.
De cette manière, je n'ai pas besoin de jouer avec l'affichage ou le positionnement. Cela s’est avéré utile lors de l’utilisation de 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;
}
Prise en charge de IE9 et des versions ultérieures: cliquez pour afficher le lien
.Si vous ne pouvez pas gérer les anciens navigateurs (c'est-à-dire MSIE 9 ou une version antérieure), vous pouvez le faire avec Module de disposition de boîte flexible , qui correspond déjà au CR CR3. Ce module permet également d’autres astuces intéressantes, telles que la réorganisation du contenu.
Malheureusement, MSIE 9 ou une version inférieure ne le prend pas 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 d’autres fournisseurs suppriment bientôt le préfixe également.
Un autre choix serait Présentation en grille CSS , mais avec une prise en charge moindre des versions stables des navigateurs. . En pratique, seul MSIE 10 le supporte.
J'ai lutté avec cela pendant un moment et j'ai fini avec ce qui suit:
Puisqu'il est facile de donner au 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%;
}
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 attribuez une hauteur à html et à body (dans cet ordre), puis une hauteur à vos éléments?
Fonctionne pour moi
style="height:100vh"
a résolu le problème pour moi. Dans mon cas, j'ai appliqué cela à la div requise
Il suffit de définir le 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 défini sur relative, absolute ou fixed. Cela fonctionnera tant que l'élément parent aura une hauteur non nulle.
Voir ce violon et 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 placer le débordement masqué sur les balises html et body, et de définir #content la hauteur à 100%. Le contenu sera toujours plus long que la fenêtre d'affichage de la hauteur de l'en-tête, mais il sera caché 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>
Essayez ceci
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. J'ai donc défini la couleur d'arrière-plan 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;
}
J'ai eu le même problème mais je ne pouvais pas faire fonctionner la solution avec les boîtes flexibles 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 occupant la hauteur restante
- contenu
J'ai utilisé des boîtes flexibles mais d'une manière plus simple, en n'utilisant que les propriétés display: flex et direction flex: ligne | colonne :
J'utilise angular et je veux que la taille de mes composants soit égale à 100% de leur élément parent.
La clé consiste à 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 a 90% de la fenêtre d'affichage, car l'en-tête et le pied de page en ont 5%.
J'ai posté mon modèle ici: https://jsfiddle.net/abreneliere/mrjh6y2e/3
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>
Décoller l'idée de M. Alien ...
Cela semble une solution plus propre que la solution 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 (vous devez inclure les valeurs de remplissage)
Utilisation de " min-height " au lieu de " height " est particulièrement utile pour pouvoir fonctionner avec du contenu rendu en javascript et des frameworks JS comme Angular2. Sinon, le calcul ne déplacera pas le pied de page en 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 ...
C’est dynamique, calculez l’espace restant sur votre écran, mieux avec Javascript.
Vous pouvez utiliser la technologie CSS-IN-JS, comme ci-dessous lib:
cela ne m'a jamais fonctionné autrement qu'avec l'utilisation de JavaScript , comme suggéré par NICCAI dans la toute première réponse. J'utilise cette approche pour redimensionner le <div> avec Google Maps.
Voici un exemple complet expliquant comment faire cela (fonctionne dans Safari / FireFox / IE / iPhone / Andorid (fonctionne avec la rotation)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
