流体，静态的，流体-3行布局

Question

好的，我看过静态， 流体，静态布局，但是现在我开始了一个需要流体，静态，流体布局的设计。

如：

+-------------------------------+
|             FLUID             |
+-------------------------------+
|      I SHALL                  |
|          TAKE 400             |
|              PIXELS           |
+-------------------------------+
|             FLUID             |
+-------------------------------+

我如何用纯CSS实现这一目标？

值得注意的是，如果屏幕太小，流动行可能为0像素。

至于我尝试过的，还没有什么线索

Answer 1

您可以对元素使用display: table-row;。

见小提琴

Answer 2

实际上，我用绝对的定位成功地破解了自己的路。

HTML：

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

CSS：

#header, #footer
{
    background-color: blue;
    position: absolute;

    width: 100%;
    height: 50%;

    top: 0;
    left: 0;

    z-index: -1;
}

#footer
{
    top: auto;
    bottom: 0;
}

#content
{
    height: 400px;

    background-color: black;

    position: absolute;

    width: 100%;
    left: 0;

    top: 50%;
    margin-top: -200px;
}

虽然这个方案有效，但似乎只适用于3行方案.或者，它总是无法回答世界著名的问题does it scale?。我的意思是，我怀疑这将适用于4行，其中三行是流动的，其中一行有一个min-height。

小提琴。

Answer 3

试试这个简单布局结构

CSS

.wrapper{
   width:100%;
}
.fluid{
    width:auto;
    background:red;
    padding:20px;
}
.fixed{
    width:360px;
    margin:0 auto;
    background:green;
    padding:20px;
}