CSS中的动态布局

我在ASP.net中做了一个非常简单的CSS布局。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设计师的所有其他领域相应调整自己。增加或减少任何部分对所有其他区域都有层叠效应。 例如，如果我增加页脚的大小，那么内容和页眉的大小应该使它们的大小与页脚一致。 如何做到这一点？

来源

2015-04-20 Naseer Ahmed

你能更具体吗？定义“相应调整自己”。 –

我给了一个例子PLZ阅读。 –

您需要给出宽度以固定宽度的百分比。 – anpsmn

所以你基本上想要一个响应式设计？我在你的内容中添加了一个包装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-->

来源

2015-04-20 05:21:46

CSS中的动态布局

回答

相关问题