这是一段时间,因为我手动编码一个网站,现在我有问题,我的顶边缘导致100%的高度给一个讨厌的滚动条,如在小提琴中看到的: http://jsfiddle.net/qKGzA/页边距导致100%的高度给水平滚动条
我不知道如何摆脱这一点,而不切断页脚(如使用溢出:隐藏)。 它可能是一个简单的解决方案,但我想不起来:)
感谢您的帮助!
我的代码:
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>
盒子大小参考http://www.w3schools.com/cssref/css3_pr_box-sizing.asp – Wayne