CSS：絶対位置なしでウェブページ上に「オーバーフロー」セグメントを作成する

Question

私のページにヘッダーとコンテンツがあります。コンテンツは、ヘッダーを失うことなく、コンテンツ内のすべてのテキストをスクロールできるように、独自のセクション内でスクロール可能でなければなりません。これはヘッダと重複コンテンツをもたらす、

position: absolute; 
    overflow-y:scroll; 

しかし：

これはコードでなんとかです。 したがって、top:80px;を定義しますが、これは特定の画面サイズでのみ機能します。ウィンドウを縮小すると、ヘッダーはコンテンツと再び重なり始めます。

コンテンツをヘッダーのすぐ下から開始するだけでなく、ヘッダーの表示を失うことなくスクロール可能な属性も必要です。追加 https://jsfiddle.net/14zckot2/6/

EDIT 1

：

max-height: 100vh; 
    overflow-y:scroll; 

代わりの

position: absolute; 
    overflow-y:scroll; 

電子の作品をここで

は、私は現在の設定を持っているフィドルですオーバーフローは、ウィンドウの下部で開始する必要がありますが、ウィンドウの下部よりも下に開始されます（ウィンドウの下部の下にある量はヘッダーの高さに等しくなります）。

max-heightをウィンドウの高さと同じに設定するにはどうすればいいですか？ヘッダーの高さか、コンテンツの開始からウィンドウの終わりまでの距離とやや等しくなりますか？

Answer 1

contentに最大高さを指定し、position:absoluteを削除する必要があります。これにより、ヘッダーが重複しません。ここで

#header { 
 
    font-size: 30px; 
 
} 
 
#content { 
 
    text-align: center; 
 
    padding: 20px; 
 
    color: #000; 
 
    clear: both; 
 
    bottom: 0px; 
 
    top: 80px; 
 
    left: 0%; 
 
    right: 21%; 
 
    overflow-y: scroll; 
 
    overflow-x: scroll; 
 
    max-height: 80px; 
 
}

<div id=header> 
 
    This is my header and its size sometimes fits and sometimes doesnt depending on screen width 
 
</div> 
 
<div id=content> 
 
    This is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my 
 
    paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph This is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis 
 
    is my paragraphThis is my paragraphThis is my paragraphThis is my paragraphThis is my paragraph 
 

 
</div>

Answer 2

は、フレックスボックスを使用して一つの解決策（IE9で動作していない）

#container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

#header { 
    flex: 1 0 auto; 
} 

#body { 
    flex: 1 1 auto; 
} 

https://jsfiddle.net/wc2wb8q1/