Question

这是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>标记中的所有<p>，那么它就可以了但是，如果我的内容超过1页，则底部边距消失那我该怎么做呢？

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

Answer 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/

Answer 2

除去不需要的html和body标签的CSS。您只需要#all

的CSS

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

您可以在此处看到它：JSFiddle。

当内容高度太大时，CSS边距不起作用

2 个答案: