1

这是jsfiddle。
代码：

<body>
    <div id="all">
        <p>just testing</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
            </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
            </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
            just testing
        </p>
    </div>
</body>

html, body {
    height : 100%;
}
#all {
    background-color: red;
    margin-top: 5%;
    margin-bottom: 5%;
    min-height: 95%;
}

我想要实现的是：
假设 h 是全屏高度。
h x 5%顶部的边距。
h x 90%内容。
h x 5%底部的边距。
如果内容超过一页，我只想保留边距并让内容随高度增长。

如果我删除标签</br>中的所有 s <p>，那么它可以工作。
但是，如果我的内容超过 1 页，则底部边距消失。
那么我该怎么做呢？

顺便说一句，令我惊讶的是，css 中 95% 的最小高度是正确的。（不是 90%）。MDN 和 W3School 似乎暗示高度不包括边距/填充/边框。

4

2 回答 2

1

在内容下添加一个 div。

<body>
    <div id="all">
      <p>
        There is a lot of content here.
      </p>
    </div>
    <div style="height:1px"></div>
<body>

这是演示http://jsfiddle.net/jeZmR/

于 2013-10-08T03:16:45.683 回答
1

去掉 html 和 body 标签的 CSS，因为它们不是必需的。你所需要的只是#all 的 CSS

#all {
    background-color: red;
    margin-top: 5%;
    margin-bottom: 5%;
    min-height: 95%;
}

你可以看到它在这里工作：JSFiddle。

于 2013-10-08T03:18:05.727 回答