Here for example there is a markup:

html,body,.container{ height:100%; } .container{ position:relative; } .main-nav{ position:absolute; top:0; height:100%; width:150px; background-color:green; } .main-content{ background-color:blue; position:absolute; top:0; min-height:100%; left:150px; right:0; } 
 <div class="container"> <div class="main-nav">Блок 1</div> <div class="main-content"><div style="height: 900px">Блок 2, длинный</div></div> </div>

Why is the .main-content not stretched because of the block with the .main-content .container ? How to stretch it? I understand that because of it .main-nav block does not correspond to height .main-content .

  • Because position: absolute - andreymal
  • @andreymal, can js help here? - Alexey Vladimirovich
  • will help flexbox - mJeevas

2 answers 2

What position:absolute; what do you think about? flexbox is now used.

 .container{ display:flex; align-items:stretch; } .main-nav{ min-height:100vh; width:150px; background-color:green; } .main-content{ background-color:blue; flex: 1; min-height:100%; } 
 <div class="container"> <div class="main-nav">Блок 1</div> <div class="main-content"><div style="height: 900px">Блок 2, длинный</div></div> </div> 

     html,body,.container{ height:auto; } .container{ position:relative; } .main-nav{ position:absolute; top:0; height:100%; width:150px; background-color:green; } .main-content{ background-color:blue; position:relative; top:0; min-height:100%; left:150px; right:0; } 
     <div class="container"> <div class="main-nav">Блок 1</div> <div class="main-content"><div style="height: 900px">Блок 2, длинный</div></div> </div>