非常简单的 CSS 最小高度 100% 边距问题答案

【问题标题】：Very simple CSS minimum height 100% issue with margin非常简单的 CSS 最小高度 100% 边距问题
【发布时间】：2012-01-16 21:25:00
【问题描述】：

我正在寻找有关如何将 div 设置为 min-height:100% 的建议，当它有 15px 的 margin-top 时？我想要的是让 div 触摸屏幕底部（不触发滚动条），但是当内容太大而无法容纳时，它会自动扩展至屏幕限制以下，触发滚动条。到目前为止，这是我所得到的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body, html{height:100%; margin:0;}
body{background:#AAA}
#main{position:relative; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}
</style>
</head>

<body>
<div id="main">
try duplicating this content until it does not fit in the box 
</div>
</body>
</html>

【问题讨论】：

max-height 也许？ :)
可能重复：stackoverflow.com/questions/485827/…
是的，我已经看到了这个线程，但尝试了解决方案 - 文本溢出框外，并且框在现代浏览器中保持相同大小。

标签： html css

【解决方案1】：

可以使用下面的css来固定div到底部

#main{position:fixed; bottom : 0px; width:970px; margin:0 auto; border:solid 1px #666; background:#FFF; margin-top:15px; min-height:100%;}

【讨论】：

【解决方案2】：

我找到了解决方案：在 body 上使用新的 CSS3 box-sizing 规则并将其设置为 padding-top:15px；删除 #main 上的 margin-top，它在所有新浏览器中的工作方式与上述完全相同。

【讨论】：