Comment forcer un bloc DIV à s’étendre au bas d’une page même s’il n’a pas de contenu?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Dans le balisage présenté ci-dessous, j'essaie de faire en sorte que la div de contenu s'étire jusqu'au bas de la page, mais ne l'étend que s'il y a du contenu à afficher. La raison pour laquelle je veux faire cela est que la bordure verticale apparaît toujours en bas de la page, même s'il n'y a pas de contenu à afficher.
Voici mon HTML :
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
Et mon CSS :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
La solution
Votre problème n'est pas que la div n'est pas à 100% de la hauteur, mais que le conteneur qui l'entoure ne le soit pas. Cela vous aidera dans le navigateur que je soupçonne que vous utilisez:
html,body { height:100%; }
Vous devrez peut-être également ajuster le remplissage et les marges, mais vous obtiendrez 90% du chemin. Si vous avez besoin de le faire fonctionner avec tous les navigateurs, vous devrez vous en occuper un peu.
Ce site contient d'excellents exemples:
http://www.brunildo.org/test/html_body_0.html < br>
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
Je vous recommande également d'aller à http://quirksmode.org/
.Autres conseils
Je vais essayer de répondre à la question directement dans le titre, plutôt que de vouloir rester collé au bas de la page.
Faites en sorte que div s’étende au bas de la page s’il n’ya pas assez de contenu pour remplir la fenêtre de visualisation verticale du navigateur disponible:
Démo à (faites glisser la poignée du cadre pour voir l’effet): http://jsfiddle.net/NN7ky
(positif: propre, simple. négatif: requiert flexbox - http://caniuse.com/flexbox )
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - ou je suis tout simplement trop fatigué
Essayez de jouer avec la règle CSS suivante:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Modifiez la hauteur en fonction de votre page. La hauteur est mentionnée deux fois pour la compatibilité entre navigateurs.
vous pouvez le pirater avec la déclaration min-height
<div style="min-height: 100%">stuff</div>
Essayez le " Sticky Footer " de Ryan Fait solution,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to -pour-de-la-page /
Fonctionne avec IE, Firefox, Chrome, Safari et soi-disant Opera également, mais n’a pas été testé. C'est une excellente solution. Très facile et fiable à mettre en œuvre.
La propriété min-height n'est pas prise en charge par tous les navigateurs. Si vous avez besoin que votre contenu contienne des pages plus longues, la propriété height le coupera court.
C'est un peu un hack, mais vous pouvez ajouter un div vide avec une largeur de 1px et une hauteur de p. ex. 1000px à l'intérieur de votre #content div. Cela forcera le contenu à atteindre une hauteur minimale de 1 000 px tout en permettant au contenu plus long d’étendre la hauteur au besoin
Bien qu'il ne soit pas aussi élégant que le CSS pur, un petit peu de javascript peut vous aider à atteindre cet objectif:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Essayez:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Je ne l'ai pas encore testé ...
Pied de page collant à hauteur fixe:
Schéma HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Je pense que le problème serait résolu en rendant le remplissage HTML 100% également, le corps remplit peut-être 100% du code HTML mais le code HTML ne remplit pas 100% de l'écran.
Essayez avec:
html, body {
height: 100%;
}
Essayez http://mystrd.at/modern-clean-css-sticky -footer /
Le lien ci-dessus est en panne, mais ce lien est https://stackoverflow.com/a/18066619/1944643 . D'accord. : D
Démo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
Vous pourriez aussi aimer ceci: http: // matthewjamestaylor .com / blog / ultimate-2-column-left-menu-pixels.htm
Ce n'est pas tout à fait ce que vous avez demandé, mais cela pourrait également convenir à vos besoins.
Je n'ai pas le code, mais je sais que je l'ai fait une fois en utilisant une combinaison de height: 1000px et margin-bottom: -1000px; Essayez ça.
En fonction du fonctionnement de votre mise en page, vous pouvez vous contenter de définir l'arrière-plan sur l'élément <html>, qui correspond toujours au moins à la hauteur de la fenêtre d'affichage.
Il n’est pas possible de réaliser cela en utilisant uniquement des feuilles de style (CSS). Certains navigateurs n'accepteront pas
height: 100%;
en tant que valeur supérieure au point de vue de la fenêtre du navigateur.
Javascript est la solution la plus simple pour tous les navigateurs, même si, comme il a été mentionné, elle n’est ni propre ni belle.
Vous pouvez utiliser le " vh " unité de longueur pour la propriété hauteur-hauteur de l'élément lui-même et de ses parents. Il est supporté depuis IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Ce n’est ni le meilleur, ni la meilleure mise en œuvre des plus grands standards, mais vous pouvez changer le DIV pour un SPAN ... C’est une solution peu recommandable mais rapide = P =)
Je sais que ce n’est pas la meilleure méthode, mais je ne pouvais pas le comprendre sans déranger mes positions d’en-tête, de menu, etc. Donc .... J'ai utilisé un tableau pour ces deux colonnes. C'était une solution rapide. Aucun JS nécessaire;)
