CSS中的動態佈局

Question

我在ASP.net中做了一個非常簡單的CSS佈局。

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-->