3

子要素を親に合わせるにはどうすればよいですか？つまり、＃contentにスクロールバーを表示しますか？

http://jsfiddle.net/vzaVc/

HTML：

<div id="parent">
    <div id="header">
        varied-sized header
    </div>
    <div id="content">
        the real content<br>
        this can be so long<br>
        that it doesn't fit into the parent<br>
        so this should get a scroll bar<br>
        so that the user can... scroll it down<br>
    </div>
</div>​

CSS：

#parent {
    background-color: red;
    display: inline-block;
    width: 200px;
    height: 300px;
}
#header {
    background-color: yellow;
    font-size: 32px;
    margin: 20px;
}
#content {
    background-color: green;    
    font-size: 24px;
    margin: 20px;
    overflow: auto;
}​

編集：

#contentで高さを指定せずに逃げることはできますか？そのプロパティの正しい値を計算することは、（他のものが変更された場合）困難で面倒な場合があります。

4

4 に答える 4

2

スクロールバーが必要な場合は、#contentCSSheight属性を追加します。overflow

height: 160px;
overflow-y: scroll;
于 2012-07-02T17:09:26.137 に答える
1

#parentこれをCSSに追加します。

overflow: scroll;

または、子にスクロールバーを持たせたい場合は、子のCSSに追加します。

于 2012-07-02T17:07:57.197 に答える
1

常にスクロールバーを表示したい場合の答えは、他の回答で述べたようにoverflow-y: scroll;、CSS に追加することです。

ただし、コンテンツが大きくなりすぎた場合にのみスクロールバーを表示したい場合、答えは絶対的な高さを設定し、次を使用することoverflow-y:auto;です。

height: 180px;
overflow-y: auto;

注意すべき重要なことは、overflow-x と overflow-y が一致しない場合、適用されるデフォルトは auto であるということです。したがって、 と がある場合overflow-x: hidden、overflow-y: visibleブラウザはこれを と解釈しoverflow: autoます。心に留めておくべきことがあります。

于 2012-07-02T17:13:56.320 に答える
0

編集に答えるために、私は通常、子オブジェクトの高さをパーセンテージで指定します。これにより、親要素の高さのパーセンテージになります。

height: 80%;
top: 15%;

これにより、常に親オブジェクトの高さの 80% になり、ヘッダーが収まる下部から 5% のマージン、上部から 15% のマージンが確保されます。

于 2012-07-02T17:49:03.247 に答える