0

我正在使用以下代码：

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;
}

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

4

4 回答 4

2

在 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="">请在remove处更正您的代码style=""。它应该是<body>
Make body 有 100% 的浏览器高度

Body 向其父 (HTML) 寻求如何缩放动态属性，因此也需要设置 HTML。

于 2012-05-06T20:49:22.840 回答
2

添加height: 100%;

http://jsfiddle.net/uTG2R/

编辑：

看起来不仅 html 和 body 需要设置它们的高度，而且里面的表格才是真正的罪魁祸首。通过定义 html 和 body 标签的高度，我们可以设置 table 标签的定义高度。

于 2012-05-06T20:49:53.010 回答
0

添加高度：100%；到你的 CSS。这应该可以满足您的要求。

于 2012-05-06T20:50:12.877 回答
0

通过提供的链接84.229.230.105:8080/NiceTry2/MyServlet，您还需要在正文高度之外，还将 HTML 标记上的高度设置为 100%。

CSS

html {
  height: 100%;
}

编辑：

刚刚用更准确的样本构建了一个 Fiddle 来解决您遇到的问题而不会引起另一个问题：

小提琴在这里！

由于 100% 将 body 一直向下拉伸的方案确实解决了这个问题，所以 body 标签顶部和底部的边距会导致 body 标签出现一定的溢出，因为 100% + 40px + 40px 总是大于100% :)

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

于 2012-05-06T21:01:23.483 回答