Динамический макет в CSS

Question

Я сделал очень простой макет в CSS в ASP.net.

HTML

<div id="header"> 
<h1>Header</h1> 
</div> 

<div id="nav"> 
<h1> Site 
</div> 

<div id="section"> 
<h1>Content</h1> 
</div> 

<div id="footer"> 
Footer 
</div> 

CSS

#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px;   
} 
#section { 
    text-align:center; 
    width:350px; 
    float:left; 
    padding:10px;   
} 
#footer { 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px;  
} 

jsfiddle

То, что я хочу, что если я изменить размер колонтитула, заголовок или область содержимого на мой взгляд, дизайн дизайнера ASP.net все остальные области соответственно изменяют размер. , который увеличивает или уменьшает любой раздел, имеет каскадный эффект во всех других областях. Например, если я увеличиваю размер нижнего колонтитула, тогда размер содержимого и заголовка должен сделать их размер равным нижнему колонтитулу. Как это можно сделать?

Answer 1

Итак, вы в основном хотите отзывчивый дизайн? Я добавил обертку div вокруг вашего содержимого, когда вы увеличите ее ширину, ширина других элементов также будет увеличена по мере того, как ширина будет указана в процентах. Пожалуйста, см. Скрипку для получения более подробной информации. https://jsfiddle.net/ptgcfgks/1/

<div id="wrapper"> 

<div id="header"> 
<h1>Header</h1> 
</div> 

<div id="nav"> 
<h1> Site 
</div> 

<div id="section"> 
<h1>Content</h1> 
</div> 

<div id="footer"> 
Footer 
</div> 

</div><!--wrapper-->