Question

如何让这个布局始终保持100％，坚持到底，而不是超出所以不需要滚动条？

enter image description here

http://jsfiddle.net/HsPtp/1/

无论我做什么，我都会在底部留出一些额外的空间。

Answer 1

您认为overflow:hidden会隐藏您的部分内容是正确的。由于你的身高/填充数字，滚动条出现了：

在.colmask上，您设置了height:100%。这与身体有关。
在#header已设置padding-bottom:16px。

这意味着您网页的完整高度为100％+ 16px。

选项1：
如果您希望您的页面没有滚动条并且始终显示内容的底部，则需要更改高度/填充数字，以便它们加起来达到100％。

示例：http://jsfiddle.net/HsPtp/12/

#header {height:5%;} /* Instead of using padding-bottom */
.colmask {height: 90%;}
#footer {height:4.5%;} /* Not 5% To allow for the 1px border you set */

选项2：

只要您知道除了页脚底部之外没有任何其他内容，您可以执行以下操作：http://jsfiddle.net/HsPtp/6/

html, body {overflow: hidden;}
#footer {position:fixed; bottom:0;height:20px;} /* height added so effect can be seen */

这基本上会从底部的#header中删除额外的16px，然后从页面流中删除#footer并将其固定在底部。因此从技术上讲，页面底部将有36px（16px #header填充+ 20px #footer高度），将被页脚切断并覆盖。

Answer 2

将overflow: hidden添加到CSS中的html，body。 http://jsfiddle.net/HsPtp/2/

Answer 3

只是我的两分钱：我会将标题和colmask推入容器div并使用类似的东西：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html {
        overflow:hidden;
      }
    </style>
  </head>
  <body>
    <p>Hello world!</p>
  </body>

</html>

100％高度，没有滚动条

3 个答案: