html - 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 设计器的设计 View 中更改页脚、页眉或内容区域的大小，所有其他区域都会相应地调整自己的大小。 即任何部分的增加或减少都会对所有其他区域产生级联效应。 例如，如果我增加页脚的大小，那么内容和页眉的大小应该与页脚保持一致。 如何做到这一点？

Answer 1

所以您基本上想要响应式设计？我在你的内容周围添加了一个包装 div，当你增加它的宽度时，其他元素的宽度也会随着宽度以百分比给出而增加。更多细节请看fiddle 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-->