如何構建靈活的結構？

Question

我想`CSS建立一個靈活的結構，這樣

TOP和BOTTOM divs有固定的高度，而中間箱有響應的高度。它們都應該覆蓋整個容器分區。

有誰能告訴我請怎麼做？

Answer 1

很簡單。

基本的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

Answer 2

鑑於此標記：

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

這些都是你需要使用的樣式：

.container { 
    height: 100vh; 
    display: flex; 
} 

.header, .footer { 
    /* don't grow, don't shrink, be 50px */ 
    flex: 0 0 50px; 

    background: black; 
} 

.main { 
    /* grow and shrink with the ratio of one */ 
    flex: 1 1; 

    background: red; 
} 

演示：http://jsbin.com/horarivopo/1/edit?html,css,output

雖然意識到瀏覽器的支持（IE10 + W /前綴） ：http://caniuse.com/#feat=viewport-units,flexbox

Answer 3

您也可以嘗試像這樣 -

*{margin: 0;padding:0;} 
 
    html, body {height: 100%;color:#fff;} 
 
    header{height:50px;background: #000;position: absolute;top:0;width: 100%;} 
 
    section {min-height: calc(100% - 50px);margin-bottom: -50px;background:red;padding-top:50px;} 
 
    section:after {content: "";display: block;} 
 
    footer, section:after {height: 50px; } 
 
    footer{background: #000;}

<header> 
 
     Header 
 
    </header> 
 
    <section> 
 
     Here is Content and all. 
 
    </section> 
 
    <footer> 
 
     Footer 
 
    </footer>

Answer 4

body{position: relative;padding: 0px; margin: 0px;} 
 
.top-sec{ background: #30a7fc none repeat scroll 0 0; 
 
    height: 40px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 100;} 
 
.middle-sec{ 
 
    bottom: 0; 
 
    clear: both; 
 
    left: 0; 
 
    overflow-x: auto; 
 
    overflow-y: initial; 
 
    position: fixed; 
 
    top: 40px; 
 
    width: 100%; 
 
    background: #000; color: #fff; 
 
\t } 
 
.bottom-sec{ 
 
background: #0000ff none repeat scroll 0 0; 
 
    bottom: 0; 
 
    height: 24px; 
 
    left: 0; 
 
    min-width: 100%; 
 
    padding: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: 1000; 
 
\t }

<div class="top-sec"></div> 
 
<div class="middle-sec">Please put here big data</div> 
 
<div class="bottom-sec"></div>

Answer 5

在這裏，您有CSS拆分一個例子更好地理解

不要忘記投票和關閉的問題，很多的人往往忘記這一點，謝謝。

/* flexbox */   
 
main, header, footer, article { display: flex } 
 
main       { justify-content: space-between; flex-direction: column } 
 
article       { flex: 1 }       /* fill available space */ 
 

 
/* flexbox optional rule */ 
 
header, footer, article   { justify-content: center; align-items: center } 
 

 
/* sizing */ 
 
html, body, main    { height: 100% }     /* CSS needs to know how to fill */ 
 
main, header, footer, article { width: 100%; max-width: 100% } /* max- for cross-browser quirks */ 
 
header, footer     { height: 50px; line-height: 50px } /* same line-height centers text vertically */ 
 

 
/* styling */   
 
body       { color: white; margin: 0; padding: 0 } 
 
header, footer     { background-color: black } 
 
article       { background-color: red }

<main> 
 
     <header>some header</header> 
 
     <article>some article</article> 
 
     <footer>some footer</footer> 
 
    </main>