主容器背景颜色不覆盖子区域

Question

我想主容器颜色也要覆盖子元素。我不能给100vh或固定的高度。

详情请参阅图像。

Code Link

<div class="container">    
 
\t <input class="nav" type="radio" name="nav" checked=true/>  
 
\t <div class="nav">CategoryA</div>    
 
\t <input class="nav" type="radio" name="nav" />  
 
\t <div class="nav">CategoryB</div>    
 
\t <input class="nav" type="radio" name="nav" />  
 
\t <div class="nav">CategoryC</div>  
 
\t <input class="nav" type="radio" name="nav" />  
 
\t <div class="nav">CategoryD</div>  
 
\t <div class="main clearfix">    
 
\t \t <section> 
 
\t \t \t <h1>Category A</h1> 
 
\t \t \t <main> 
 
\t \t \t \t <label class="heading" for="checkbox_1A">HEADING A</label> 
 
\t \t \t \t <input type="checkbox" id="checkbox_1A" style="display:none;"> 
 
\t \t \t \t <div id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus turpis ac posuere laoreet. Donec vehicula hendrerit nibh, in laoreet nibh rutrum a. Aenean vestibulum lectus sem.</div> 
 
\t \t \t </main> 
 
\t \t \t <main> 
 
\t \t \t \t <label class="heading" for="checkbox_1B">HEADING B</label> 
 
\t \t \t \t <input type="checkbox" id="checkbox_1B" style="display:none;"> 
 
\t \t \t \t <div id="hidden">Lorem ipsum dolor sit amet,.</div> 
 
\t \t \t </main> 
 
\t \t </section>      
 
\t \t <section> 
 
\t \t \t <h1>Category B</h1> 
 
\t \t \t <main> 
 
\t \t \t \t <label class="heading" for="checkbox_2B">HEADING B</label> 
 
\t \t \t \t <input type="checkbox" id="checkbox_2B" style="display:none;"> 
 
\t \t \t \t <div id="hidden">Praesent non nulla id tortor malesuada tincidunt</div> 
 
\t \t \t </main> 
 
\t \t </section>      
 
\t \t <section> 
 
\t \t \t <h1>Category C</h1> 
 
\t \t </section>      
 
\t \t <section> 
 
\t \t \t <h1>Category D</h1> 
 
\t \t </section> </div> 
 
</div>

Answer 1

的问题是，主要部分在心里的位置是绝对的，所以基本上浏览器看到的主要内容为空。

因此，无论你的部分放置在其他方面（不使用绝对位置）的主要内容里面，或者你给。主要的100vh高度：

.main { 
    width: calc(100% - 200px); 
    height: 100vh; 
}