web-dev-qa-db-ja.com

固定高さなしのスクロールバー/スクロールバー付きの動的な高さ

私はこの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を避けたいです。

htmlcssscrollbar
35
GuillaumeS

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>

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;
}
    </div>  
</div>
48
mtyaka

これを使って：

style = "max-height：300px; overflow：auto;"

固定された高さを避けるために

6
Sanchi Girotra

固定高さを指定する必要があります。100％を使用することはできません。これは、height=100% なにかの？

編集されたフィドル：

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

5
Philip Bevan
 <div id="scroll">
    <p>Try to add more text</p>
 </div>

ここにCSSコードがあります

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

ここにデモがあります [〜＃〜] jsfiddle [〜＃〜]

3
user4148647

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

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

または類似のもの

2
Philip Bevan

非常に少ないJSとCSSパディングを使用した迅速でクリーンなアプローチ： http://jsfiddle.net/benjamincharity/ZcTsT/14/

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

$('#content').css({
  'padding-top': headerHeight,
  'padding-bottom': footerHeight
});
2
Benjamin

垂直スクロールが必要な場合は、ある程度の高さを固定する必要があります。問題の要素またはその親に固定高さを設定したくない場合は、別のオプションがあります-兄弟に固定高さを設定します。したがって、200pxの高さの兄弟をまとめて言うと、要素にはheight: calc(100% - 200px);が含まれます。このようにして、要素の高さを動的にし、overflow-y: auto;および目的のスクロールを取得します。

<div id="body">
<div id="head">
    <p>Fixed size without scrollbar</p>
    <p>Fixed 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>  

#body {
    width: 300px;
    border: black dashed 2px;
    height: 400px; /*this is need only for the sake of the example. 
In the real code you will have height set by some ascendant element or 
at last throght the chain by the window  */
    overflow: hidden;
}
    
#head {
    height: 150px;
    background: red;
}

#content{
    overflow-y: auto;
    height: calc(100% - 200px)
}

#foot {
    height: 50px;
    background: blue;
}
0
P.Petkov

私はそれが正しいかどうかわかりませんが、 this はあなたの問題を解決しますか？

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%;
}
0
Luis

これを使って：

#head {
    border: green solid 1px;
    height:auto;
}    
#content{
            border: red solid 1px;
            overflow-y: scroll;
            height:150px;       
        }
0
Uttara

PrimeNG p_Dialogコンテンツで同様の問題があり、contentStyleの以下のスタイルで修正しました

height: 'calc(100vh - 127px)'
0
El Ghandor Yasser

表示グリッドを使用すると、各セクションの高さを動的に調整できます。

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

上記のコードを追加すると、目的の結果が得られます。

多くのレベルのグリッドが関係している場合、cssは#contentを1frに制限しないことがあります。そのようなシナリオでは次を使用します。

#content{
  max-height:100%;
}
0
Aseem