65

私はこのHTML構造を持っています：

<div id="body">
    <div id="head">
        <p>Dynamic height without scrollbar</p>
    </div>
    <div id="content">
        <p>Dynamic height with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed height without scrollbar</p>
    </div>  
</div>

本体（#body）の中にオーバーフローのない3つの部分を入れたいです。そのため、中央部分にスクロールバーが必要です。

私はこのCSSを試しました：

#content{
    border: red solid 1px;
    overflow-y: auto;
}

この：

#content{
    border: red solid 1px;
    overflow-y: auto;
    height: 100%;
}

しかし、どちらも機能しません。

JSFiddleで例を挙げました。

CSSとHTMLだけでこれを行うことはできますか？Javascriptは避けたいです。

4

11 に答える 11

82

Flexbox は、高さを固定したり JavaScript を使用したりせずにこれを行うことができる最新の代替手段です。

display: flex; flex-direction: column;コンテナとflex-shrink: 0;ヘッダーとフッターの div を設定すると、うまくいきます。

HTML:

<div id="body">
    <div id="head">
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>
        <p>Dynamic size without scrollbar</p>  
    </div>
    <div id="content">
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
        <p>Dynamic size with scrollbar</p>
    </div>
    <div id="foot">
        <p>Fixed size without scrollbar</p>
        <p>Fixed size without scrollbar</p>
    </div>  
</div>

CSS:

#body {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 300px;
    width: 500px;
    border: black dashed 2px;
    display: flex;
    flex-direction: column;
}

#head {
    border: green solid 1px;
    flex-shrink: 0;
}

#content{
    border: red solid 1px;
    overflow-y: auto;
    /*height: 100%;*/
}

#foot {
    border: blue solid 1px;
    height: 50px;
    flex-shrink: 0;
}
于 2016-08-24T13:27:55.337 に答える
5

固定の高さを指定する必要があります。100% を使用することはできません。比較対象がないためheight=100%です。

編集されたフィドル:

http://jsfiddle.net/6WAnd/4/

于 2012-06-11T13:26:19.547 に答える
2

この質問に対するJSの回答は次のとおりです。

http://jsfiddle.net/6WAnd/20/

または同様のもの

于 2012-06-11T15:31:48.437 に答える
2

JS と CSS のパディングをほとんど使用しない、迅速でクリーンなアプローチ: http://jsfiddle.net/benjamincharity/ZcTsT/14/

var headerHeight = $('#header').height(),
    footerHeight = $('#footer').height();

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});
于 2013-04-20T18:32:37.273 に答える
0

正解かどうかはわかりませんが、これで問題は解決しますか？

私はちょうど変更しましたoverflow-y: scroll;

#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 100px;
}

編集済み

次に、次のようなパーセンテージ値を使用してみてください：http: //jsfiddle.net/6WAnd/19/

CSSマークアップ：

#body {
    position: absolute;
    top; 150px;
    left: 150px;
    height: 98%;
    width: 500px;
    border: black dashed 2px;
}    
#head {
    border: green solid 1px;
    height: 15%;
}
#content{
    border: red solid 1px;
    overflow-y: scroll;
    height: 70%;
}
#foot {
    border: blue solid 1px;
    height: 15%;
}
于 2012-06-11T13:20:51.010 に答える
0

これを使って：

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }
于 2012-06-11T13:22:43.493 に答える