Hauptbehälter Hintergrundfarbe nicht Covering Kind Abschnitt Bereich

Question

Ich möchte Hauptbehälter Farbe sollte Kind Element auch abdecken. Ich kann nicht 100vh oder feste Höhe geben.

Bitte Bild für Details sehen.

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

Das Problem ist, dass alles, was im Inneren des Hauptabschnitts absolute positioniert ist, so dass im Grunde sieht der Browser den Hauptinhalt als leer.

Also entweder Sie die Abschnitte innerhalb des Hauptinhalt auf andere Weise positionieren (nicht absolute Position verwendet wird), oder Sie geben .main eine Höhe von 100vh:

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