在没有 javascript 的情况下让页脚高度拉伸以填充视口答案

【问题标题】：Have footer stretch in height to fill viewport without javascript在没有 javascript 的情况下让页脚高度拉伸以填充视口
【发布时间】：2012-02-09 00:30:56
【问题描述】：

我有一个基本布局，我希望页脚在内容之后占据视口的剩余部分。现在，当我使用下面的代码时，它会绘制一个滚动条，因为高度被计算为页脚高度（100%）加上内容高度（变化），有没有办法在不计算内容高度的情况下防止滚动条用javascript计算？

html,body{height:100%;} 
.content {position: relative;}
.footer{height: 100%; min-height:100%; background-color:green; overflow: hidden;  padding-bottom: -2000px;}

<div class="content">
content
</div>

<div class="footer">
Footer
</div>

【问题讨论】：

看看stackoverflow.com/questions/9160159/…。应该是一个非常相似的解决方案。

标签： html css

【解决方案1】：

<html><head>
<style type="text/css">

body{overflow:hidden;} 
.content {position: relative;}
.footer{height: 100%; background-color:green;  padding-bottom:-2px;margin:0px;}
</style>
</head>

<body>


<div class="content">
content
</div>

<div class="footer">
Footer
</div>
</body>
</html>

【讨论】：

【解决方案2】：

如果仅用于演示目的，我会这样做：

HTML

<div id="wrap">
    <div id="content">
    Your main page content here
    </div><!-- #content -->
Your footer content here
</div><!-- #wrap -->

CSS

html, body {
    height: 100%;
    background: #F0F0F0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

#wrap {
    height: 100%;
    width: 800px;
    background: #ccc;
    margin: auto;
} 

#content {
    background: #fff;
}

【讨论】：