はやるにはどうすればブートストラップ4本レイアウト例を考えると

Question

でネストされた列を伸ばす：

https://www.codeply.com/go/Xw4cYl3kwu

「HEADER」の欄には、一定の高さです。他のすべての列には、表示されるページに応じて可変の高さを持つ可変内容があります。

「MENU」と「CONTENT」の列を「FOOTER」に伸ばすにはどうすればよいですか？

Answer 1

さてあなたは、フレキシボックスを使用することができるならば、これは解決策が考えられます。

<div class="container-fluid"> 
    <div class="row" > 
    <div class="col-9 bg-danger" style="display:flex;flex-direction: column"> 
     <div class="row" style="height: 3rem"> 
     <div class="col-12" > 
      <h1 class="text-center">HEADER</h1> 
     </div> 
     </div> 
     <div class="row" style="flex-grow:1"> 
     <div class="col-3 bg-success">MENU</div> 
     <div class="col-9 bg-warning">CONTENT</div> 
     </div> 
    </div> 
    <div class="col-3 bg-info"> 
     <p>SIDEBAR</p> 
     <p>SIDEBAR</p> 
     <p>SIDEBAR</p> 
     <p>SIDEBAR</p> 
    </div> 
    </div> 
    <div class="row bg-primary"> 
    <div class="col-12"> 
     <div class="text-center">FOOTER</div> 
    </div> 
    </div> 
</div>