Réponses:
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;
}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
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.
min-height: 100vhserait beaucoup mieux. Il serait également mis à l'échelle pour les conceptions réactives.
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.
min-heightet height?
<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.
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 elementLa 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.
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>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
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%.
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.
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.
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;
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>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.
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.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>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>À 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;}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.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}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
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}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');
});Avez-vous essayé quelque chose comme ça?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>