Question

好的，我已经看过 static，fluid，静态布局，但现在我的设计需要流畅，静态，流畅布局。

如：

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

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

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

至于我所尝试的内容，还没有 - 没有任何线索可以开始。

Answer 1

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

see fiddle

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行场景......或者，它总是无法回答No-SQL世界着名的问题does it scale?。我的意思是，我怀疑这将适用于4行，其中3行是流动的，其中一行有min-height。

Fiddle.

Answer 3

试试这个simple layout structure

<强> CSS

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

流体，静态，流体 - 3排布局

3 个答案: