フレックスボックスを使用して3 divsウィンドウの高さに合わせる

3つの別々のdivをオーバーフローを起こさずに画面の高さまで伸ばすにはどうすればよいですか？フレックスボックスを使用して3 divsウィンドウの高さに合わせる

でIは、ブートストラップおよびフレキシボックスを使用していたが、私は100％に行の高さを設定するたびに、オーバーフローキック。

をIは、ページの大部分を埋めるために「コンテンツ」（黄色領域）たいとヘッダー（アクアエリア）とフッター（ピンクエリア）はわずか100ピクセルです。

私はフレックス成長と無駄なく伸びて遊んだ。

ご協力いただきありがとうございます。

CSS：

body {padding-top: 51px;} 
html, body { 
    background-color: rgb(48, 48, 48); 
    height: 100%; 
} 

.body-container { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 

} 

.ribbon-container { 
    background-color:aqua; 
    height: 100px; 
    flex: 1; 
} 

.content-container { 
    background-color: yellow; 
    display: flex; 
    flex: 2; 
} 

.footer-container { 
    height: 50px; 
    background-color: pink; 
    display: flex; 
    flex: 1; 
}

HTML：

<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">asdfasdf.com</a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-center"> 
        <li><a href="../Default.aspx">Home</a></li> 
        <li><a href="../Pages/About.aspx">About</a></li> 
        <li class="active"><a href="../Pages/Applications.aspx">Applications</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <div class="conatiner-fluid body-container col-lg-12"> 
     <div class="row"> 
      <div class="container-fluid ribbon-container"> 
       Ribbon 
      </div> 


      <div class="content-container"> 
       Content 
      </div> 


      <div class="footer-container"> 
       Footer 
      </div> 
     </div> 
    </div> 
</body>

出典

2016-06-22 mwilson

はあなたが原因ブートストラップのデフォルト.rowクラスの難しさに実行しています。

ブロック要素ではなくフレックス要素になるようにこのクラスのオーバーライドを設定してください。あなたは良い形になっています。

コンテンツコンテナにoverflow: autoを追加すると、コンテンツ領域がスクロールしながら、ヘッダーとフッターがそのまま残ります。

はまた、私はフレックスの要素のための速記をお勧めします。

flex: 0 0 100pxは、要素が100pxに（または幅...あなたのflex-directionに依存する）の一定の高さであり、拡大または縮小しないことを意味します。

flex: 1は、要素があらゆる方向に伸縮することを意味します。

ヘッダとフッタが固定サイズであることをより明確にするために、私はそれらをflex: 0 0 50pxに設定しました。したがって、コードをコピーするときにこれを100pxに変更してください！

https://jsfiddle.net/7xtybdrm/4/

出典

2016-06-22 02:52:21 Jon

おかげで、ジョン！これは素晴らしいです。追加情報ありがとう（フレックスボックスの新機能） – mwilson

あなたは賭けました！私はまだFlexboxで新しいことを学んでいます。あなたはそれのハングアップを取得します！ Flexboxを使用して別の一般的なアプリケーションレイアウトを特集した私の他の回答をブックマークしてください：http://stackoverflow.com/questions/33514047/flexbox-holy-grail-layout-fixed-header-fixed-left-nav-fluid-content-area -fix。どのように動作するかを理解するのに役立つ色付きのブロックが付いた簡略化されたバージョンがあります。最後に、このリンクはFlexboxのすべてのメッカです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Jon

フレックスボックスを使用して3 divsウィンドウの高さに合わせる

答えて

関連する問題