固定布局上的内容空间太多

时间：2013-09-12 02:27:17

标签： html css height sticky-footer

我正在使用固定的页眉/页脚布局，在它们中间有一个.container和.content div但由于某种原因，.container上有太多的空白区域，导致滚动条出现时.content div.

中只有2段文字

在添加100％标题之前，固定页脚正在运行。我不完全确定我的标记是否坏，这就是原因，或者“固定页脚”黑客与其中一个类冲突。

实例： http://jsfiddle.net/A9vVX/7/embedded/result/

来源： http://jsfiddle.net/A9vVX/7/

有没有人知道修复此问题的解决方案，请分叉。谢谢。

5 个答案:

答案 0 :(得分：0)

我添加了“身高：自动;”到你的.container

希望这有帮助！

答案 1 :(得分：0)

尝试以下更改

.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;
}

答案 2 :(得分：0)

我将.container设置为默认min-height值，您可以根据自己的需要量身定制。页脚只是粘在它下面。

这个小提琴可以解决您的问题：http://jsfiddle.net/jofrysutanto/A9vVX/17/

答案 3 :(得分：0)

您的容器应该max-height:100%而不是min-height:100%。check this fiddle

答案 4 :(得分：0)

我没有正确理解你，但我认为你想要这样的事情：

enter image description here

如果是，这里是代码：

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/

来源：

http://jsfiddle.net/a3Qsf/6/

下载HTML源文档：

https://www.dropbox.com/s/qw0i310f2bdmuv8/Stackoveflow.html

在谷歌浏览器，Firefox，IE以及中高分辨率下进行测试。

相关问题
最新问题