Comment un élément html peut-il remplir 100% de la hauteur restante de l'écran, en utilisant uniquement le CSS?

118

J'ai un élément d'en-tête et un élément de contenu:

#header
#content

Je veux que l'en-tête soit de hauteur fixe et que le contenu remplisse toute la hauteur restante disponible à l'écran, avec overflow-y: scroll;.

Est-ce possible sans Javascript?

html css Harry
la source

83

L'astuce pour cela est de spécifier une hauteur de 100% sur les éléments html et body. Certains navigateurs se tournent vers les éléments parents (html, body) pour calculer la hauteur.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

BentOnCoding
la source

1

J'ai essayé toutes les solutions mais seulement cela a résolu mon problème.

Alex

1

@Alex si cela fonctionne pour tous les navigateurs que vous ciblez, alors allez-y et implémentez-le. Les exigences de chacun sont différentes.

BentOnCoding

321

oubliez toutes les réponses, cette ligne de CSS a fonctionné pour moi en 2 secondes:

height:100vh;

1vh = 1% de la hauteur de l'écran du navigateur

la source

Pour une mise à l'échelle réactive de la mise en page, vous pouvez utiliser:

min-height: 100vh

[mise à jour novembre 2018] Comme mentionné dans les commentaires, l'utilisation de la hauteur min pourrait éviter d'avoir des problèmes sur les conceptions reponsives

[mise à jour avril 2018] Comme mentionné dans les commentaires, en 2011, lorsque la question a été posée, tous les navigateurs ne prenaient pas en charge les unités d'affichage. Les autres réponses étaient les solutions à l'époque - vmaxn'est toujours pas prise en charge dans IE, donc ce n'est peut-être pas encore la meilleure solution pour tous.

Sébastien H.
la source

9

C'est la réponse la plus simple, car vous n'avez pas besoin de définir la hauteur de tous les éléments parents à 100%. Voici le support actuel pour vh - caniuse.com/#feat=viewport-units - iOS pourrait apparemment avoir besoin d'une solution de contournement, car "vh sur iOS est signalé pour inclure la hauteur de la barre d'outils inférieure dans le calcul de la hauteur".

Brian Burns

2

WOW, belle trouvaille! Regardez tous ces gens avec des réponses trop compliquées.

NoName

8

Lorsque la question a été posée en 2011, aucun des principaux navigateurs ne prenait en charge les unités de fenêtre. Ces «réponses trop compliquées» étaient les seules options à l'époque.

JJJ

6

Suggestion mineure qu'un min-height: 100vhserait beaucoup mieux. Il serait également mis à l'échelle pour les conceptions réactives.

Wiggy A.

3

Cela ne répond pas à la question posée, cela occuperait 100% de la fenêtre d'affichage. Il ne le souhaite pas car son en-tête occupera x% de la fenêtre d'affichage, les autres réponses étant correctes.

4cody

35

En fait, la meilleure approche est la suivante:

html { 
    height:100%;
}
body { 
    min-height:100%;
}

Cela résout tout pour moi et cela m'aide à contrôler mon pied de page et il peut avoir le pied de page fixe, peu importe si la page est défilée vers le bas.

Solution technique - EDITÉE

Historiquement, la «hauteur» est une chose délicate à mouler, comparée à la «largeur», la plus simple. Depuis que le CSS se concentre sur le <body>style pour fonctionner. Le code ci-dessus - nous avons donné <html>et <body>une hauteur. C'est là que la magie entre en scène - puisque nous avons «min-height» sur la table de jeu, nous disons au navigateur qu'il <body>est supérieur <html>parce qu'il <body>contient la min-height. Ceci à son tour, permet <body>de passer outre <html>car il <html>avait déjà une hauteur plus tôt. En d'autres termes, nous incitons le navigateur à "sauter" <html>hors de la table, afin que nous puissions styliser indépendamment.

Faron
la source

1

Oh mon dieu c'est un miracle!

Geoff

Comme un miracle, ça marche! Mais s'il vous plaît: pourquoi min-heightet height?

Joy

1

@ShaojiangCai - Historiquement, la «hauteur» est une chose difficile à modeler, comparée à la «largeur», la plus facile. Depuis que le CSS se concentre sur le <body>style pour fonctionner. Ce code: nous avons donné <html>et <body>une hauteur. C'est là que la magie entre en scène - puisque nous avons «min-height» sur la table de jeu, nous disons au serveur qui <body>est supérieur <html>parce qu'il <body>détient la min-height. Ceci à son tour, permet <body>de passer outre <html>car il <html>avait déjà une hauteur plus tôt. En d'autres termes, nous trompons le serveur pour qu'il "saute" <html>de la table, afin que nous puissions styliser indépendamment.

Faron

2

@Faron Il semble que «navigateur» serait un meilleur choix de mot ici au lieu de «serveur». ;)

LETs

@EunLeem ... Je suis d'accord avec vous sur la façon dont j'aurais pu choisir le libellé approprié pour répondre à cela. Merci pour la pointe "elbow-bump". J'ai mis à jour ma réponse en conséquence.

Faron le

14

Vous pouvez utiliser vh sur la propriété min-height.

min-height: 100vh;

Vous pouvez procéder comme suit, selon la façon dont vous utilisez les marges ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

Almeida Cavalcante
la source

10

La solution acceptée ne fonctionnera pas réellement. Vous remarquerez que le contenu divsera égale à la hauteur de son parent, body. Donc, régler la bodyhauteur sur la 100%mettra égale à la hauteur de la fenêtre du navigateur. Disons que la fenêtre du navigateur était 768pxen hauteur, en définissant la divhauteur du contenu sur 100%, la divhauteur du navigateur sera à son tour 768px. Ainsi, vous vous retrouverez avec l'en-tête div étant 150pxet le contenu div étant 768px. À la fin, vous aurez du contenu 150pxen bas de la page. Pour une autre solution, consultez ce lien.

Dykstrad
la source

8

Avec HTML5, vous pouvez faire ceci:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

Miguel
la source

Méfiez-vous de l'utilisation de calc sur la hauteur en pourcentage. Firefox ne fonctionnera pas correctement avec cela à moins que tous les parents n'aient une hauteur définie.

TomDK

4

Pour moi, le suivant a bien fonctionné:

J'ai enveloppé l'en-tête et le contenu sur un div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

J'ai utilisé cette référence pour remplir la hauteur avec flexbox. Le CSS va comme ceci:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

Pour plus d'informations sur la technique flexbox, consultez la référence

hasher
la source

1

Vous pouvez également définir le parent sur display: inline. Voir http://codepen.io/tommymarshall/pen/cECyH

Assurez-vous également que la hauteur du html et du corps est définie sur 100%.

tommymarshall
la source

Les réponses aux liens uniquement sont déconseillées. Veuillez essayer de résumer le contenu du lien dans votre réponse

Utilisateur qui n'est pas un utilisateur

1

La réponse acceptée ne fonctionne pas. Et la réponse la plus élevée ne répond pas à la question réelle. Avec un en-tête de hauteur de pixel fixe, et un remplissage dans l'affichage restant du navigateur, et faites défiler pour owerflow. Voici une solution qui fonctionne réellement, utilisant le positionnement absolu. Je suppose également que la hauteur de l'en-tête est connue, par le son de "tête fixe" dans la question. J'utilise 150px comme exemple ici:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS: (ajout de la couleur d'arrière-plan pour l'effet visuel uniquement)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

Pour un aperçu plus détaillé de son fonctionnement, avec le contenu réel à l'intérieur de #Content, jetez un œil à ce jsfiddle , en utilisant des lignes et des colonnes bootstrap.

sauts4fun
la source

"en-tête de hauteur de pixel fixe" -> exactement! La bottompropriété s'est assurée que le #Contentreste bloqué à la fin de la page. J'apprécie que vous preniez le temps de l'expliquer.

Armfoot

1

Et je suis heureux que cela ait aidé quelqu'un;)

jumps4fun

1

Dans ce cas, je veux que mon contenu principal div soit une hauteur liquide afin que la page entière occupe 100% de la hauteur du navigateur.

height: 100vh;

Fezal halai
la source

1

S'il vous plaît laissez-moi ajouter mes 5 cents ici et proposer une solution classique:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

Développer l'extrait

Cela fonctionnera dans tous les navigateurs, pas de script, pas de flex. Ouvrez l'extrait de code en mode pleine page et redimensionnez le navigateur: les proportions souhaitées sont conservées même en mode plein écran.

Remarque:

Les éléments avec une couleur de fond différente peuvent en fait se couvrir les uns les autres. Ici, j'ai utilisé une bordure solide pour m'assurer que les éléments sont correctement placés.
idHeader.heightet idContent.topsont ajustés pour inclure la bordure et doivent avoir la même valeur si la bordure n'est pas utilisée. Sinon, les éléments sortiront de la fenêtre, car la largeur calculée n'inclut pas la bordure, la marge et / ou le remplissage.
left:0; right:0;peut être remplacé par width:100%pour la même raison, si aucune bordure n'est utilisée.
Le test sur une page séparée (pas comme un extrait de code) ne nécessite aucun ajustement html / body.
Dans IE6 et les versions antérieures, nous devons ajouter padding-topet / ou des padding-bottomattributs à l' #idOuterélément.

Pour compléter ma réponse, voici la disposition du pied de page:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Développer l'extrait

Et voici la disposition avec à la fois l'en-tête et le pied de page:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

Développer l'extrait

Dmitry Babich
la source

0

À moins que vous n'ayez besoin de prendre en charge IE 9 et ci-dessous, j'utiliserais flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

Vous devez également faire en sorte que le corps remplisse toute la page

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

James Lambert
la source

0

CSS PLaY | en-tête / pied de page fixe du navigateur croisé / disposition de colonne unique centrée

Cadres CSS, version 2: Exemple 2, largeur spécifiée | 456 rue Berea

Une chose importante est que même si cela semble facile, il va y avoir un peu de code laid dans votre fichier CSS pour obtenir un effet comme celui-ci. Malheureusement, c'est vraiment la seule option.

Joe
la source

Les réponses aux liens uniquement sont déconseillées. Essayez d'inclure le code dans votre réponse.

Utilisateur qui n'est pas un utilisateur

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

Jazib Khan
la source

-1

La meilleure solution que j'ai trouvée jusqu'à présent consiste à définir un élément de pied de page en bas de la page, puis à évaluer la différence entre le décalage du pied de page et l'élément à développer. par exemple

Le fichier html

<div id="contents"></div>
<div id="footer"></div>

Le fichier css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Le fichier js (en utilisant jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

Vous pouvez également mettre à jour la hauteur de l'élément de contenu à chaque redimensionnement de la fenêtre, donc ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

Αλέκος
la source

-1

Très simple:

#content {
    max-height: 100%;
}

Masood
la source

-3

Avez-vous essayé quelque chose comme ça?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

Rahul Choudhary
la source

Comment un élément html peut-il remplir 100% de la hauteur restante de l'écran, en utilisant uniquement le CSS?

Réponses:

Remarque:

Le fichier html

Le fichier css

Le fichier js (en utilisant jquery)