如何强制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 =）
