Question

我想用`CSS这样

构建一个灵活的结构

TOP和BOTTOM divs具有固定高度，而中央框具有响应高度。所有这些都应该覆盖整个容器div。

有谁能告诉我怎么做？

Answer 1

＆＃13;

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;
	}
.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;
	}

＆＃13;

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

＆＃13;

Answer 2

非常简单。

基本的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%;
}

不要忘记，当在％中使用“height”时，您需要在元素的所有父元素中包含固定高度才能使其工作（在本例中为body和html）< / p>

<强> JSFIDDLE

Answer 3

鉴于此标记：

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

这里有一个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>

Answer 5

您也可以尝试这样 -

＆＃13;

*{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;}

＆＃13;

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

＆＃13;

如何建立灵活的结构？

5 个答案: