我使用的是固定的页眉/页脚布局，中间有一个 .container 和 .content div，但由于某种原因，.container 上的空白太多，当只有 2 个段落时会出现滚动条中的文本.content div.
在我添加 100% 页眉之前，固定页脚正在工作。我不完全确定我的标记是否不好，这就是原因，或者“固定页脚”hack 与其中一个类发生冲突。
现场示例：http: //jsfiddle.net/A9vVX/7/embedded/result/
来源：http: //jsfiddle.net/A9vVX/7/
有谁知道解决这个问题的方法，请分叉。谢谢你。
我没有正确理解你，但我认为你想要这样的东西：
如果是，这里是代码：
HTML：
<!doctype HTML>
<html lan="en">
<head>
<meta charset="utf-8">
<title>
Home , MySite.com
</title>
</head>
<body>
<div id="Head-Wrap">
<span id="Logo">
<img src="logo.jpg" width="250" height="300" alt="Logo" />
</span>
<span class="header" >
<ul class="Nav">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#"> Testimonials</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</span>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In faucibus, tortor ac pulvinar eleifend, lectus velit scelerisque elit, vel mattis turpis tellus ut ante. Suspendisse pharetra ipsum blandit, condimentum purus pulvinar, facilisis nisl. Phasellus ac pulvinar nibh. Curabitur eu dolor eget enim ultricies fringilla et quis dui. Donec consequat vitae tortor in imperdiet. Ut eu posuere diam. Nunc tristique risus eget eros tempus, in adipiscing diam tincidunt. Phasellus eget erat felis..</p>
</div>
<div id="footer">
The Fixed Footer
</div>
</body>
</html>
CSS：
#Head-Wrap {
display:block;
position:absolute;
width:100%;
top:0px;
left:0px;
position:fixed;
background-color:white;
}
.header .Nav{
display: block;
background-color: transparent;
height: 45px;
margin: 0px auto;
padding: 0px;
position: relative;
width: 960px;
}
.header .Nav li{
display: inline;
margin: 0 0 0 0;
position: relative;
width: 110px;
list-style: none;
padding: 0px 0px 0px 0px;
}
.header .Nav li a{
text-decoration: none;
margin: 0px auto;
}
.container {
background-color:white;
position:absolute;
left:0px;
margin:0px;
padding:0px;
top:350px;
position:fixed;
height:445px;
overflow:scroll;
}
#footer {
position:absolute;
left:0px;
width:100%;
top:100%;
height:100px;
margin-top:-101px;
margin-left:-1px;
padding:0px;
background-color:white;
}
小提琴：
全屏：
http://jsfiddle.net/a3Qsf/6/embedded/result/
资源：
下载 HTML 源文档：
https://www.dropbox.com/s/qw0i310f2bdmuv8/Stackoveflow.html
在 google chrome 、 Firefox 、 IE 和中高分辨率上测试它。
我添加了一个“高度：自动；” 到你的 .container
希望这可以帮助！
尝试以下更改
.header-wrap {
display: block;
width: 100%;
position: absolute;
height: 200px;
background-color: #c8cfe9;
top: 0px;
}
.container {
min-height: 100%;
margin-bottom: -100px;
margin-top: 200px;
height: auto;
}
.footer {
background-color: #c8cfe9;
margin-top: -100px;
}
我将您设置.container为具有默认min-height值，您可以根据需要对其进行定制。页脚就在它下面。
这个小提琴能解决你的问题吗：http: //jsfiddle.net/jofrysutanto/A9vVX/17/
您应该使用max-height:100%您的容器而不是min-height:100%. 检查这个小提琴