Css 即使没有内容，如何强制DIV块扩展到页面底部？
在下面显示的标记中，我试图让content div一直延伸到页面底部，但只有当有内容要显示时，它才会延伸。我之所以要这样做，是因为即使没有任何内容可显示，垂直边框仍会显示在页面下方 这是我的演示：Css 即使没有内容，如何强制DIV块扩展到页面底部？,css,html,border,Css,Html,Border,在下面显示的标记中，我试图让content div一直延伸到页面底部，但只有当有内容要显示时，它才会延伸。我之所以要这样做，是因为即使没有任何内容可显示，垂直边框仍会显示在页面下方 这是我的演示： 正文{ 字体系列：投石机MS、Verdana、MS无衬线； 字号：0.9em； 保证金：0； 填充：0； } div#头{ 宽度：100%； 高度：100px； } #标题a{ 背景位置：100px 30px； 背景：透明url（site-style-images/sitelogo.jpg）无重复固
正文{
字体系列：投石机MS、Verdana、MS无衬线；
字号：0.9em；
保证金：0；
填充：0；
}
div#头{
宽度：100%；
高度：100px；
}
#标题a{
背景位置：100px 30px；
背景：透明url（site-style-images/sitelogo.jpg）无重复固定100px 30px；
高度：80px；
显示：块；
}
#标题#menuwrapper{
背景重复：重复；
背景图片：url（站点风格图片/darkblue\u background\u color.jpg）；
}
#菜单#菜单捕捉器{
高度：25px；
}
分队{
宽度：100%
}
#菜单，#内容{
宽度：1024px；
保证金：0自动；
}
div#菜单{
高度：25px；
背景色：#50657a；
}你可以用声明来破解它
<div style="min-height: 100%">stuff</div>
东西
这并不是你想要的，但也可能适合你的需要。尝试使用以下css规则：
#内容{
最小高度：600px；
高度：自动！重要；
高度：600px；
}
更改高度以适合您的页面。为实现跨浏览器兼容性，高度被提及两次。并非所有浏览器都支持最小高度属性。如果需要在较长的页面上扩展#内容的高度，height属性会将其缩短
这有点像黑客，但你可以在你的内容分区中添加一个宽度为1px、高度为1000px的空分区。这将迫使内容至少达到1000px高，并且在需要时允许更长的内容扩展高度我没有代码，但我知道我曾经使用高度组合：1000px和边距底部：-1000px；试试看。虽然它没有纯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>
div{
边框：1px实心#000000；
}
函数扩展到窗口（元素）{
var保证金=10；
如果（element.style.heighthtml,body { height:100%; }
我还建议您尝试一下Ryan Fait的“粘性页脚”解决方案
适用于IE、Firefox、Chrome、Safari和Opera，但尚未测试。这是一个很好的解决方案。非常容易和可靠地实施。尝试：
html，正文{
身高：102%；
}
.包装纸{
位置：相对位置；
身高：100%；
宽度：100%；
}
.分区{
位置：绝对位置；
排名：0；
底部：0；
宽度：1000px；
最小高度：100%；
}
尚未对其进行测试…仅使用样式表（CSS）是不可能实现这一点的。有些浏览器不接受
height: 100%;
Javascript是最简单的跨浏览器解决方案，尽管如前所述，它不是一个干净漂亮的解决方案。我知道这不是最好的方法，但如果不弄乱标题、菜单等位置，我就无法找到它。所以我用一张桌子放那两个柱子。这是一个快速修复。不需要JS；） 试试看 上面的链接已关闭，但此链接正常：D 演示：
詹姆斯·迪恩：粘脚
html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.100px；
/*底部=页脚高度*/
填充：25px；
}
页脚{
背景颜色：橙色；
位置：绝对位置；
左：0；
底部：0；
高度：100px；
宽度：100%；
溢出：隐藏；
}
詹姆斯·迪恩：粘脚
废话废话
更多废话废话
页脚内容
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
* { 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;
}
我将尝试直接在标题中回答这个问题，而不是死死地在页面底部粘贴一个页脚 如果没有足够的内容填充可用的垂直浏览器视口，请将div延伸到页面底部： 演示（拖动帧控制柄以查看效果）：
（正面：干净、简单。反面：需要flexbox-） HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
* { 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;
}
<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>
我认为只要让html填充率达到100%，问题就会得到解决， 可能是正文填充了100%的html，但html并没有填充100%的屏幕 尝试：
html, body {
height: 100%;
}
如果有更多的内容可以放在页面上，您希望它做什么？你关心什么浏览器？这个解决方案对CSS中的scroll.min-height属性可以帮助他解决问题的页面不友好。。。我猜有趣的是，这将我的滚动问题分类，而不是导致它们