CSSのオーバーフローでラップ内のスタティックヘッダーの問題が発生する

私は、フィドルに見られるように、オーバーフローするコンテンツの下部に苦労しています。このレイアウトを維持しながら、これを修正する方法はどうですか？CSSのオーバーフローでラップ内のスタティックヘッダーの問題が発生する

CSS：

.wrapper { 
    overflow-y: hidden; 
    overflow-x: hidden; 
    border: 1px solid #000; 
    height: 200px; 
    width: 200px; 
} 

.wrappedheader { 
    position: static; 
    border-bottom: 1px solid #000; 
    padding: 15px; 
} 

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: 100%; 
    padding: 15px; 
}

HTML：

<div class="wrapper"> 
    <div class="wrappedheader"> 
    This is a header 
    </div> 

    <div class="wrappedbody"> 
    <!-- Content causing overflow-y --> 
    </div> 

</div>

出典

2016-07-15 SadBoi2000

：wrappedbodyの高さは、ラッパーの高さがマイナスwrappedheaderの高さでなければなりませんか？スクロールバーを完全に表示しようとしていますか？もしそうなら、答えはhttp://jsfiddle.net/MrLister/Sa6cb/396/ –

ありがとう、これはそれをしました。編集：私はそれを理解しているかわからない、なぜ私たちは正確に61pxを引いているのですか？そして、動作する計算を使わない、より強固な方法はありませんか？ – SadBoi2000

パディング。 15px times 4. @ feihcsimの答えも見てください。今は行くよ、すみません。 –

あなたwrappedbodyは、その親、ラッパーの100％である高さ100％を持っています。ただし、ラッパーには2つの子、ラップボディーおよびラップドヘッダーがあります。どのように苦労

.wrappedbody { 
    position: relative; 
    overflow-y: auto; 
    height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/ 
    padding: 15px; 
}

http://jsfiddle.net/feihcsim/14auqpqd/

出典

2016-07-15 18:41:16 feihcsim

ヘッダーの行の高さは18pxと仮定します。 –

ありがとうございます。問題は、ヘッダーの高さが私の問題で動的に変化していることです。その高さは分かりません。 – SadBoi2000

次に、高さ制約をラッパーからラップボディーに移動してください。 http://jsfiddle.net/feihcsim/14auqpqd/1/ – feihcsim

CSSのオーバーフローでラップ内のスタティックヘッダーの問題が発生する

答えて

関連する問題