Faire un div remplir la hauteur de l'espace d'écran restant
je travaille actuellement sur une application web, où je veux que le contenu remplisse la hauteur de l'écran entier.
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 div . En ce moment j'utilise une table pour la disposition comme ceci:
#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 est à l'intérieur de la div de contenu, le paramètre top: 0; le mettra juste sous l'en-tête. Parfois, le contenu sera une vraie table, avec sa hauteur de 100%. Mettre header à l'intérieur de content ne permettra pas à cela de fonctionner.
est y a-t-il un moyen d'obtenir le même effet sans utiliser le table ?
mise à jour:
Éléments à l'intérieur du contenu div aura hauteurs en pourcentages. Donc quelque chose à 100% à l'intérieur du div le remplira jusqu'au fond. Lorsque deux éléments à 50%.
mise à jour 2:
par exemple, si l'en-tête prend 20% de la hauteur de l'écran, une table spécifiée à 50% à l'intérieur de #content prendrait 40% de l'espace d'écran. Jusqu'à présent, envelopper toute la chose dans une table est la seule chose qui fonctionne.
30 réponses
2015 mise à jour: l'approche flexbox
il y a deux autres réponses qui mentionnent brièvement flexbox ; cependant, c'était il y a plus de deux ans, et ils ne fournissent aucun exemple. Le cahier des charges de flexbox est définitivement réglé.
Note: Bien que la spécification CSS Flexible Boxes Layout soit au stade de la recommandation Candidate, ce ne sont pas tous les navigateurs qui l'ont mise en œuvre. La mise en œuvre de WebKit doit être préfixé avec-webkit -; Internet Explorer implémente une ancienne version du spec, préfixée avec-ms -; Opera 12.10 implémente la dernière version du spec, non corrigé. Voir le tableau de compatibilité sur chaque propriété pour une mise à jour de compatibilité de l'état.
(tiré de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )
tous les principaux navigateurs et IE11 + support Flexbox. Pour IE 10 ou plus vieux, vous pouvez utiliser la jante FlexieJS.
pour vérifier le support actuel, vous pouvez aussi le voir ici: http://caniuse.com/#feat=flexbox
exemple pratique
avec flexbox, vous pouvez facilement basculer entre n'importe laquelle de vos rangées ou colonnes ayant des dimensions fixes, des dimensions de la taille du contenu ou des dimensions de l'espace restant. Dans mon exemple, j'ai défini l'en-tête pour passer à son contenu (selon la question OPs), j'ai ajouté un pied de page pour montrer comment ajouter une région de hauteur fixe et ensuite définir 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, le flex propriété raccourcit flex-grow , flex-shrink , et flex-base propriétés pour établir la flexibilité des articles flex. Mozilla a un bon introduction au modèle de boîte flexible .
il n'y a vraiment pas de son, de navigateur croisé pour faire cela dans CSS. Si votre mise en page est complexe, vous devez utiliser JavaScript pour définir la hauteur de l'élément. L'essence de ce que vous devez faire est:
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 attacher les gestionnaires d'événements à la fois la fenêtre onload et onresize de sorte que vous pouvez tirer votre fonction redimensionner.
aussi, en supposant que votre contenu pourrait être plus grand que le viewport, vous aurez besoin de définir overflow-y pour faire défiler.
Le post original est de plus de 3 ans. Je suppose que beaucoup de gens qui viennent à ce poste comme moi sont à la recherche d'une solution de mise en page de type application, disons un en-tête en quelque sorte fixe, pied de page, et le contenu pleine hauteur de prendre l'écran de repos. Si oui, ce post 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 billet:
@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 tables dans le markup, vous pourriez utiliser des tables CSS.
Balisage
<body>
<div>hello </div>
<div>there</div>
</body>
(pertinent) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
certains avantages de cette méthode sont:
1) moins la majoration
2) Le balisage est plus sémantique que les tableaux, parce qu'il ne s'agit pas de données tabulaires.
3) le soutien de navigateur est très bon : IE8+, tous les navigateurs modernes et les appareils mobiles ( caniuse )
Juste pour l'exhaustivité, voici les éléments Html équivalents aux propriétés css pour le le 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 }
CSS Approche (Si la hauteur est connue/fixe)
lorsque vous voulez que l'élément du milieu s'étende verticalement sur toute la page, vous pouvez utiliser calc() qui est introduit dans CSS3.
en supposant que nous avons une hauteur fixe header et footer éléments et nous voulons que l'étiquette section prenne la hauteur verticale disponible entière...
supplied markup
<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 ici, ce que je fais est, en additionnant la hauteur des éléments et de déduire de 100% en utilisant calc() fonction.
assurez-vous D'utiliser height: 100%; pour les éléments parents.
utilisé:
height: calc(100vh - 110px);
:
.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> cela pourrait être fait purement 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>
j'ai vérifié, il fonctionne dans tous les principaux navigateurs: Chrome , IE , et FireFox
aucune des solutions Posté le travail quand vous avez besoin de la div bas pour faire défiler quand le contenu est trop grand. 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;
}
j'ai cherché une réponse pour cela aussi. Si vous avez la chance de pouvoir cibler IE8 et plus, 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 de bloc incluant div.
si vous êtes encore plus chanceux et que vos utilisateurs utilisent des navigateurs de premier niveau (par exemple, s'il s'agit d'une application intranet sur des ordinateurs que vous contrôlez, comme mon dernier projet est), vous pouvez utiliser le nouveau format de boîte Flexible en CSS3!
CSS3 Façon Simple
height: calc(100% - 10px); // 10px is height of your first div...
tous les principaux navigateurs compatibles, alors allez-y si vous n'avez pas exigence à l'appui de vintage navigateurs.
utilisez simplement vh qui signifie view height dans CSS ...
regardez l'extrait de code 151960920" j'ai créé pour vous ci-dessous et l'exécute:
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:
ce qui a fonctionné pour moi (avec un div dans un autre div Et je suppose dans toutes les autres circonstances) est de mettre le rembourrage du bas à 100%. C'est-à-dire, ajouter ceci à votre CSS / feuille de style:
padding-bottom: 100%;
une solution simple, en utilisant flexbox:
<div>header</div>
<div class="content"></div>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
une solution alternative, avec un div centré dans le contenu div
<!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 sains, vous pouvez placer le" header " div avant le contenu, comme un frère, et le même CSS fonctionnera. Cependant, IE7-n'interprète pas correctement la hauteur si le flotteur est 100% dans ce cas, de sorte que l'en-tête doit être dans le contenu, comme ci-dessus. Le débordement: auto va causer des barres de défilement doubles sur IE (qui a toujours la barre de défilement viewport visible, mais désactivée), mais sans elle, le contenu se clipera si elle déborde.
Avertissement: La accepté de répondre donne l'idée de la solution, mais je trouve ça un peu gonflé avec une inutile wrapper et des règles css. 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 unités de visionnement et flexbox , et est donc IE10+, à condition que vous utilisez l'ancienne syntaxe pour IE10.
Codepen à jouer avec: lien vers codepen
Ou celui-là, pour ceux qui le conteneur principal à défilement en cas de débordement du contenu: lien vers codepen
si vous pouvez vous occuper de ne pas prendre en charge d'anciens navigateurs (c'est-à-dire, MSIE 9 ou plus ancien), vous pouvez le faire avec module de disposition de boîte Flexible qui est déjà W3C CR. Ce module permet également d'autres astuces intéressantes, telles que la réorganisation du contenu.
malheureusement, MSIE 9 ou moins ne supporte pas cela et vous devez utiliser le préfixe vendeur pour la propriété CSS pour chaque navigateur autre que Firefox. Avec un peu de chance, d'autres vendeurs laissent tomber le préfixe aussi.
un autre choix serait CSS Grid Layout mais qui a encore moins de support des versions stables des navigateurs. Dans la pratique, seul le MSIE 10 supporte cela.
j'ai lutté avec ceci pendant un certain temps et j'ai fini avec ce qui suit:
Puisqu'il est facile de faire DIV le contenu la même hauteur que le parent mais apparemment difficile de le faire la hauteur de parent moins la hauteur de l'en-tête j'ai décidé de faire div le contenu pleine hauteur mais le positionner absolument dans le coin supérieur gauche et puis définir un rembourrage pour le sommet qui a la hauteur de l'en-tête. De cette façon, le contenu s'affiche parfaitement sous l'en-tête et remplit toute la 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?
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 donnant html et corps (dans cet ordre) une hauteur et puis juste donner à vos éléments une hauteur?
Fonctionne pour moi
il y a une tonne de réponses maintenant, mais j'ai trouvé en utilisant la hauteur: 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 de positionnement. Cela est devenu pratique lorsque J'ai utilisé Bootstrap pour faire un tableau de bord dans lequel j'avais une barre latérale et une main. Je voulais que la principale s'étire et remplisse tout l'espace vertical pour que je puisse appliquer une couleur de fond.
div {
height: 100vh;
}
supporte IE9 et plus: Cliquez pour voir le lien
vous pouvez en fait utiliser display: table pour diviser la zone en deux éléments (en-tête et contenu), où l'en-tête peut varier en hauteur et le contenu remplit l'espace restant. Cela fonctionne avec toute la page, ainsi que lorsque la zone est simplement le contenu d'un autre élément positionné avec position mis à relative , absolute ou fixed . Cela fonctionnera aussi longtemps que l'élément parent a 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 que le contenu soit caché si c'est trop long, vous n'avez pas besoin de faire flotter l'en-tête. Il suffit de mettre le débordement caché sur les balises html et body, et de mettre #content hauteur à 100%. Le contenu sera toujours plus long que le viewport par 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>
définit simplement le body avec display:grid et le grid-template-rows en utilisant auto et la propriété de valeur fr .
* {
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>Essayez cette
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
style="height:100vh"
a résolu le problème pour moi. Dans mon cas, je l'ai appliqué à la division requise 151920920."
j'ai trouvé une solution assez simple, parce que pour moi c'était juste un problème de conception. Je voulais que le reste de la Page ne soit pas blanc sous le pied de page rouge. Donc j'ai mis la couleur de fond des pages en rouge. Et le contenu de fond de couleur à blanc. Avec la hauteur du contenu réglée par ex. 20em ou 50% une page presque vide ne laissera pas toute la page rouge.
pour application mobile j'utilise uniquement 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 travailler la solution avec flexboxes ci-dessus. J'ai donc créé mon propre modèle, qui comprend:
- un en-tête avec une taille fixe de l'élément
- a footter
- barre latérale avec barre de défilement qui occupe la hauteur restante
- contenu
j'ai utilisé des flexboxes mais d'une manière plus simple, en n'utilisant que les propriétés display: flex et flex-direction: ligne / colonne :
j'utilise l'angle et je veux que la taille de mes composants soit 100% de leur élément parent.
La clé est de définir la taille (en pourcentage) pour tous les parents afin de limiter leur taille. Dans l'exemple suivant myapp height a 100% du viewport.
le composant principal a 90% du viewport, parce que l'en-tête et le pied de page 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>
à partir de L'idée de M. Alien...
cela semble une solution plus propre que la populaire flex box one pour les navigateurs compatibles CSS3.
utilisez simplement min-height(au lieu de height) avec calc() pour le bloc content.
Le calc() commence avec 100% de la soustraction des hauteurs des en-têtes et pieds de page (nécessité d'inclure les valeurs de remplissage)
utilisant "min-height" au lieu de "height" est particulièrement utile de sorte qu'il peut fonctionner avec du contenu Rendu javascript et des cadres JS comme Angular2. Sinon, le calcul ne poussera pas le pied de page au bas de la page une fois que le contenu javascript rendu est visible.
voici un exemple simple d'en-tête et de pied de page utilisant une hauteur de 50px et un rembourrage de 20px 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, le calcul peut être simplifié mais vous obtenez le idée...
C'est dynamique calc le remining d'espace à l'écran, une meilleure utilisation de Javascript.
vous pouvez utiliser la technologie CSS-IN-JS, comme ci-dessous lib:
it n'a jamais fonctionné pour moi d'une autre manière, puis avec L'utilisation du JavaScript comme NICCAI suggéré dans la toute première réponse. J'utilise cette approche pour changer l'échelle du <div> avec Google Maps.
Voici l'exemple complet Comment faire cela (fonctionne en Safari / FireFox / IE / iPhone / Andorid (fonctionne avec 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>