如何构建灵活的结构？ [英] How to build flexible structure?

问题描述

我想用这样的CSS建立一个灵活的结构。

TOP和BOTTOM divs 具有固定高度，而中央框具有响应高度。

任何人都可以告诉我怎么做？

解决方案

很容易。

基本HTML：

 < div class =header >< / div> 
< div class =main>< / div> 
< div class =footer>< / div> 
  

和基本css：

  body，html {
 height：100％; 
 margin：0; 
} 
 .header，.footer {
 height：30px; 
 background-color：black; 
 width：100％; 
} 
 .main {
 height：calc（100％ -  30px  -  30px）; 
 background-color：red; 
 width：100％; 
} 
  

只要不要忘记在％包括在元素的所有父元素中的固定高度以使其工作（在这种情况下 body 和 html ）

JSFIDDLE

I want to build a flexible structure with `CSS like this

TOP and BOTTOM divs have fixed height, while central box have responsive height. And all of them should cover the whole container div.

Can anyone tell me please how to do this?

解决方案

Quite easy.

Basic html:

<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>

and basic css:

body, html {
    height:100%;
    margin:0;
}
.header, .footer {
    height:30px;
    background-color:black;
    width:100%;
}
.main {
    height:calc(100% - 30px - 30px);
    background-color:red;
    width:100%;
}

Just don't forget that when using "height" in % you need to include a fixed height in all parents of the element to make it work (in this case bodyand html)

JSFIDDLE

这篇关于如何构建灵活的结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！