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を削除すると、機能します。 ただし、コンテンツが 1 ページを超えると、下の余白がなくなります。 では、これをどのように行うべきですか？<p>

ところで、css の 95% min-height は、驚いたことに正しいです。（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 に答える