Question

自从我手动编码一个网站以来已经有一段时间了，现在我遇到的问题是我的上边距会导致100％的高度给出一个讨厌的滚动条，如小提琴中所示： http://jsfiddle.net/qKGzA/

我无法弄清楚如何在不切断页脚的情况下摆脱这一点（就像使用溢出：隐藏）。它可能是一个简单的解决方案，但我想不到它：）

感谢您的帮助！

我的代码：

 html, body{
    background-color:#ececec;

    height:100%;
    width: 100%;

    margin:0;
    padding:0;

}

div#wrapper{
    background-color:#ffffff;

    width: 962px;
    height: auto !important;
    min-height: 100%;
    height:100%;

    margin:0 auto;
    padding:20px 15px 0px 15px;

    position:relative;
    display:block;
}

footer{
    background-color:#363636;

    width:95%;
    height: 15px;

    margin:0;
    padding:10px;

    position:absolute;
    bottom:0;

    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#e1e1e1;
    text-align:center;
}

footer p{
    margin:0;
    padding:0;
    display:inline-block;
}
footer p.divider{
    margin:0 20px;
}

HTML：

    <body>


<div id="wrapper" >
    <header>
    header header
    </header>
    <menu> Menu menu</menu>
    <section>
    section section
    </section>
    <footer>
    <p>x</p><p class="divider">~</p>
    <p>x</p><p class="divider">~</p>
    <p>x</p><p class="divider">~</p>
    <p>x</p>
    </footer>
</div>



</body>

Answer 1

一个。你的身体是否必须分配高度和宽度？难道你不能简单地设置背景。它应该自动跨越任何不依赖于用户屏幕的宽度。

湾您可以将主体设置为position：absolute;左：0;右：0;顶部：0;溢出：隐藏; 这应该允许你的身体根据需要扩大身高。

℃。您可以指定实际高度（以像素为单位）或em。像700px这样的东西不应该离屏幕，但当然如果用户移动就会改变。

Answer 2

div＃wrapper的高度为：100％，填充：20px 15px 0px 15px，使其100％+ 20像素。如果你添加

box-sizing:border-box;

到div＃wrapper，填充将在100％内，滚动条消失。

非css3替代方法是将一个元素放在div＃wrapper内部的顶部，高度为20像素。也许将20px顶部填充添加到非CSS3浏览器包装器内的header元素。

边距导致100％高度给出水平滚动条

2 个答案: