html - 如何构建柔性结构？

Question

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

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

谁能告诉我怎么做？

Answer 1

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

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