Question

我正在使用以下代码：

body {
    margin-bottom: 40px;
    margin-right: 30px;
    margin-left:  30px;
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

从顶部和侧面一切都很好，但页面没有到达底部。我怎样才能让它一直到达底部？

Answer 1

在CSS中尝试这个

body {
        margin-bottom: 40px;
        margin-right: 30px;
        margin-left:  30px;
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
         background-color: gray;
         height: 100%;
        }
        html, table
        {
            height:100%;
        }

请在<body style="">删除style=""时更正您的代码。它应该是<body>
Make body have 100% of the browser height

Body查看其父级（HTML）以了解如何扩展动态属性，所以HTML也需要设置。

Answer 2

添加height: 100%;

http://jsfiddle.net/uTG2R/

编辑：

似乎不仅是html和身体需要设置它们的高度，而且其中的表是真正的罪魁祸首。通过定义html和body标签的高度，我们可以设置表标签的已定义高度。

Answer 3

添加高度：100％;对你的CSS。这应该做你需要的。

Answer 4

通过提供的链接84.229.230.105:8080/NiceTry2/MyServlet，您需要的是身高，在HTML标记上也将高度设置为100％。

<强> CSS

html {
  height: 100%;
}

<强>编辑：

刚刚用一个更准确的样本建立了一个小提琴来解决你遇到的问题而不会造成另一个问题：

小提琴here！

由于100％的解决方案一直向下拉伸身体确实解决了问题，身体标签顶部和底部的边缘会导致身体标签的某些溢出，因为100％+ 40px + 40px是总是大于100％：）

Fiddle建议HTML和BODY标签具有100％x 100％的视图端口大小，并使用一个绝对定位的div来包装整个页面内容。提到的包装器获得了所需的边距。

使页面适合屏幕

4 个答案: