如何强制DIV块扩展到页面的底部,即使它没有内容?

在下面显示的标记中,我试图让内容div一直延伸到页面的底部,但只有在显示内容的时候才会伸展。 我想这样做的原因是即使没有任何内容要显示,垂直边框仍然显示在页面的下方。

这是我的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> 

和我的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; } 

你的问题不是这个div不是100%的高度,而是它周围的容器不是。这将有助于我怀疑你正在使用的浏览器:

 html,body { height:100%; } 

您可能还需要调整填充和边距,但这会使您获得90%的path。如果需要使其适用于所有浏览器,则必须稍微调整一下。

这个网站有一些很好的例子:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

我也build议去http://quirksmode.org/

我会试着直接在标题中回答这个问题,而不是在页脚底部粘贴页面。

如果没有足够的内容填充可用的垂直浏览器视口,请将div扩展到页面的底部:

演示在(拖动框架处理看效果): http : //jsfiddle.net/NN7ky
(好处:干净,简单。缺点:需要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 – 或者我太困了

尝试玩下面的CSS规则:

 #content { min-height: 600px; height: auto !important; height: 600px; } 

更改高度以适合您的页面。 跨浏览器兼容性提到两次高度。

你可以用最小高度声明来破解它

 <div style="min-height: 100%">stuff</div> 

试试Ryan Fait的“粘脚”解决scheme,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

适用于IE浏览器,Firefox,Chrome浏览器,Safari浏览器,也可能Opera浏览器,但没有testing过。 这是一个很好的解决scheme。 实施起来非常简单可靠。

所有浏览器都不支持最小高度属性。 如果你需要#content来延长页面的高度,高度属性会缩短它的长度。

这有点破解,但是你可以在你的#content div里添加一个宽度为1px,高度为1000px的空div。 这将迫使内容至less1000px高,仍然允许更长的内容在需要时延长高度

虽然它不如纯粹的CSS优雅,但一点点的JavaScript可以帮助完成这一点:

 <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> 

具有固定高度的粘性页脚:

HTMLscheme:

 <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; } 

尝试:

 html, body { height: 102%; } .wrapper { position: relative; height: 100%; width: 100%; } .div { position: absolute; top: 0; bottom: 0; width: 1000px; min-height: 100%; } 

还没有testing过

尝试http://mystrd.at/modern-clean-css-sticky-footer/

演示:

 <!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> 

你也可能会喜欢这个: http : //matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

这不是你所要求的,但也可能适合你的需求。

根据布局的工作方式,您可能会忽略在<html>元素上设置背景,该元素总是至less是视口的高度。

不可能仅使用样式表(CSS)来完成此操作。 有些浏览器不会接受

 height: 100%; 

作为比浏览器窗口的视点更高的值。

Javascript是最简单的跨浏览器解决scheme,虽然如前所述,不是一个干净的或漂亮的。

您可以使用“vh”长度单位作为元素本身及其父项的最小高度属性。 从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; } 

我认为这个问题将被固定只是使HTML填充100%,可能是身体填充HTML的100%,但HTML不填充100%的屏幕。

试试:

 html, body { height: 100%; } 

我没有代码,但我知道我曾经使用过的高度:1000px和margin-bottom:-1000px; 试试看

我知道这不是最好的方法,但我不能弄清楚我的标题,菜单等位置。 所以……我用了两张桌子。 这是一个快速修复。 没有JS需要;)

不是最好的,也不是最好的最好的标准,但是你可以改变一个SPAN的DIV …这不是那么值得推荐,但是快速修复= P =)