Question

这是我的页面：http://bad-sf.com/stemtest/about.html

请注意，即使内容小到不需要滚动，滚动仍然是一个选项。它可能与我的CSS有关吗？（下图）：

body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
* {
margin:0;
padding:0;
outline: none;
}
html, body {
height:100%;
font-family: '_.regular';
font-size: 13px;
outline: none;
}
#wrap {
min-height:100%;
width:800px;
margin: 2% auto;
}
#main {
overflow:auto;
padding-bottom: 30px;
}
#smm {
width: 400px;
height: 200px;
float:left;
}

#footer {
position: relative;
margin-top: 0px;
height: 35px;
clear:both;
font-family: '_.regular';
}

谢谢！我还在学习HTML和CSS，所以你的任何输入都会非常感激 - Danny

Answer 1

这是由#wrap造成的，身高为104％。请注意以下规则：

body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    margin: 2% auto;
}

所以你的#wrap实际上是100％身高加上2％的保证金加上最低2％的保证金。

有几种方法可以解决这个问题。

您可以从height移除body，也可以从min-height移除#wrap，因为在这种情况下它不再有用。

您可以将margin上的#wrap更改为margin: 0 auto;（但这会不可避免地提高内容）。

可能还有其他一些可能性，但看到不满意的答案被拒绝，我并不觉得有必要考虑更多的崇高解决方案。

Answer 2

从height:100%;取走html, body { }。为什么你甚至还需要它呢？

滚动条始终显示的原因是#wrap DIV也设置为100％高度，最重要的是2％的边距。这会迫使你的身体超过100％2％。

您可以从#wrap中删除2％的保证金，但如果您不想这样做，则从height: 100%;删除html, body { }就可以了。

页面显示滚动条，无论如何

2 个答案: