主要容器背景颜色不覆盖儿童区域

Question

我希望主容器颜色也应该覆盖子元素。我不能给100vh或固定高度。

详情请见图片。

Code Link

＆＃13;

＆＃13;

<div class="container">   
	<input class="nav" type="radio" name="nav" checked=true/> 
	<div class="nav">CategoryA</div>   
	<input class="nav" type="radio" name="nav" /> 
	<div class="nav">CategoryB</div>   
	<input class="nav" type="radio" name="nav" /> 
	<div class="nav">CategoryC</div> 
	<input class="nav" type="radio" name="nav" /> 
	<div class="nav">CategoryD</div> 
	<div class="main clearfix">   
		<section>
			<h1>Category A</h1>
			<main>
				<label class="heading" for="checkbox_1A">HEADING A</label>
				<input type="checkbox" id="checkbox_1A" style="display:none;">
				<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>
			</main>
			<main>
				<label class="heading" for="checkbox_1B">HEADING B</label>
				<input type="checkbox" id="checkbox_1B" style="display:none;">
				<div id="hidden">Lorem ipsum dolor sit amet,.</div>
			</main>
		</section>     
		<section>
			<h1>Category B</h1>
			<main>
				<label class="heading" for="checkbox_2B">HEADING B</label>
				<input type="checkbox" id="checkbox_2B" style="display:none;">
				<div id="hidden">Praesent non nulla id tortor malesuada tincidunt</div>
			</main>
		</section>     
		<section>
			<h1>Category C</h1>
		</section>     
		<section>
			<h1>Category D</h1>
		</section> </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是主要部分内的所有内容都是绝对的，所以基本上浏览器会将主要内容视为空。

所以你要么以其他方式将部分放在主要内容中（不使用绝对位置），要么给.main高度为100vh：

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