内部divの下に動的高さフッターがあるコンテナに合わせてサイズを変更します

コンテナdivに2つのdivが縦に積み重ねられています。コンテナのdivはheight: 100%、下のinner-divは動的な高さです。私は、上部divがコンテナの残りのスペースを占めるようにして、下部divがビューポートの下部に効果的に固定されるようにします。内部divの下に動的高さフッターがあるコンテナに合わせてサイズを変更します

<div class="container" style="height: 100%"> 
    <div class="my-height-should-be-the-remainder-of-the-container" style="overflow: scroll"> 
    <p>My content should scroll if I become too small to show all of it</p> 
    </div> 

    <div class="my-height-should-take-priority-over-the-top-div"> 
    <p>My height should dynamically change depending on my content</p> 
    <p>As a result, my content should never overflow</p> 
    </div> 
</div>

私はdisplay: table-rowように、内側のdivでdisplay: tableを使用してみましたが、overflow: scrollを尊重するトップのdivを取得することはできません。下のdivをビューポートの外にプッシュするだけです。

私は下のdivにposition: fixedを使用できることがわかっていますが、javascriptを使用してトップdivのpadding-bottomを動的に変更しますが、CSS専用のソリューション、

ありがとうございます！

出典

2016-03-31 kjb

あなたがスクロールするコンテンツの周りに絶対位置のdivを使用する場合は、領域を消費しないために、レイアウトに表示されますので、他のコンテンツは、テーブルベースのレイアウトに出て勝ちます。それで、必要があれば絶対配置されたdivのラッパーにoverflow：autoを使うことができます。

例：

body, html{ 
    margin:0; 
    padding:0; 
} 
div{ 
    box-sizing:border-box; 
} 
.container{ 
    height:100vh; 
    width:100vw; 
    display:table; 
    border-collapse:collapse; 
} 
.tr{ 
    display:table-row; 
} 
.td{ 
    display:table-cell; 
    height:100%; 
} 
.header{ 
    height:100%; 
    border:1px solid green; 

} 
.wrapper{ 
    height:100%; 
    position:relative; 
    overflow:auto; 
    min-height:45px; 
} 
.content{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 
.footer{ 
    border:1px solid blue; 
}

<div class="container"> 
    <div class="tr header"> 
    <div class='td'> 
     <div class="wrapper"> 
     <div class="content"> 
      <p>My content should scroll if I become too small to show all of it</p> 
      <p>My content should scroll if I become too small to show all of it</p> 
      <p>My content should scroll if I become too small to show all of it</p> 
      <p>My content should scroll if I become too small to show all of it</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="tr footer"> 
    <p>My height should dynamically change depending on my content</p> 
    <p>As a result, my content should never overflow</p> 
    <p>My height should dynamically change depending on my content</p> 
    <p>As a result, my content should never overflow</p> 
    <p>My height should dynamically change depending on my content</p> 
    <p>As a result, my content should never overflow</p> 
    </div> 
</div>

フィドル：https://jsfiddle.net/trex005/j7m3yLp7/1/

詳細：https://blogs.msdn.microsoft.com/kurlak/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css-ie8-firefox-chrome-safari/

出典

2016-03-31 04:50:56 trex005

-2

これが必要なのかどうかはわかりません。最上位のdivは最大200pxです

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<style> 
.top { 
    height: 20%; 
    background-color: red; 
    max-height: 200px; 
} 

.bottom { 
    background-color: green; 
    height: 80%; 
} 
</style> 
</head> 
<body> 
<div class="container" style="height: 100%;background-color: yellow;"> 
    <div class="top" style="overflow: scroll;"> 
    <p>My content should scroll if I become too small to show all of it</p> 
    </div> 

    <div class="bottom"> 
    <p>My height should dynamically change depending on my content</p> 
    <p>As a result, my content should never overflow</p> 
    </div> 
</div> 

</body> 
</html>

出典

2016-03-31 04:36:40 hoffman

質問で述べたように、ボトムDIVの高さは、コンテンツ – kjb

yeapに応じて動的です。コンテンツが変更されたときに調整されます。 – hoffman

あなたが好ましく基づいていますが、ここではそれはどのようなものになるかであるフレキシボックスではないと述べましたその制限を解除する場合：

body, html { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#container { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    height: 100%; 
 
} 
 
#top { 
 
    background: lightblue; 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 
#bottom { 
 
    background: lightgreen; 
 
}

<div id="container"> 
 
    <div id="top"> 
 
    This is the top. 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    </div> 
 
    <div id="bottom"> 
 
    This is the bottom 
 
    </div> 
 
</div>

出典

2016-03-31 05:41:03

ありがとう！フレックスボックスが幅広くサポートされており、一貫性があることに本当に興奮しています。そして、私たちは最終的に、現代のCSSテクニックの多くの狂気を取り除くことができます。サポートは長い道のりを歩んできましたが、ブラウザー間の動作はまだ私の好みにあわないほど矛盾しています。 – kjb

内部divの下に動的高さフッターがあるコンテナに合わせてサイズを変更します

答えて

関連する問題