CSS-4列（固定流体固定）

我见过三个柱的例子（固定流体固定）。但是，我需要一个四列解决方案的示例

两个外柱是固定的。 两个内柱是流体

固定的|流体|流体|固定的

您可以使用

您可能还需要应用供应商前缀。

HTML

<div id="framecontentLeft">
    <div class="innertube">
        <h1>Left Frame 1</h1>
    </div>
</div>

<div id="framecontentRight">
    <div class="innertube">
        <h1>Right Frame 4</h1>
    </div>
</div>


<div id="maincontent">
    <div class="inner1">
        <h1>Middle Frame 2</h1>
    </div>
    <div class="inner2">
        <h1>Middle Frame 3</h1>
    </div>
</div>

---

如果您可以使用的话，我更喜欢flexbox而不是

calc

。它更…灵活

<div id="container">
    <div class="fixed">
        Fixed
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fixed">
        Fixed
    </div>
</div>

当然，这会使所有列具有相同的高度，如果您可以假设，在不使用flexbox的情况下使用flexbox也没有问题（请注意，如果流体元素不一定比固定的元素高，则应为内部容器指定一个

最大高度

）：

---

当然，如果

瓶子溢出，你需要一些清理
：：在
之后你说的“液体”是什么意思？是否希望两个“流体”列共享剩余空间？50%/50%？正确。。。因此，如果我为第一列和最后一列设置宽度（300px、400px或其他），中间的两列将填充这两列之间的空间，并根据屏幕大小/分辨率进行相应调整。哦，太酷了。所以我在谷歌上搜索了一下，找到了这个。calc跨浏览器的任何其他资源？，@bjb568 calc不是标准，在发布之前，您可以考虑跨浏览器兼容性，以下特性是有风险的，并且在CR期间可能会被删除：“Calc（）”、“ToGeLe（）”、“THARD（）”。资料来源：什么？所以我们不应该使用HTML5？Calc不会被删除，这太疯狂了，因为它到处都有实现，而且主要网站都依赖它。@ProllyGeek答案没有错，你应该感谢有人抽出时间帮助别人，除非你有一个更好的答案，否则我建议你不要批评别人的正确答案使用位置：这样的固定会破坏一些布局。OP想要固定的|流体|流体|固定布局。
#framecontentLeft, #framecontentRight{
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 200px;
    height: 100%;
    background-color: navy;
    color: white;
}

#framecontentRight{
    left: auto;
    right: 0; 
    width: 150px;
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 0;
    left: 200px;
    right: 150px;
    bottom: 0;
    background: #fff;
    overflow: hidden;
}

.inner1{
    height: 100%;
    background:red;
    width:50%;
    float:left;
}
.inner2{
    background:green;
    height: 100%;
    width:50%;
    float:right;
}

<div id="container">
    <div class="fixed">
        Fixed
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fluid">
        Fluid
    </div>

    <div class="fixed">
        Fixed
    </div>
</div>

<div id="container">
    <div class="fixed left">
        Fixed
    </div>

    <!-- Fluid container! No, you don’t have to call it this. -->
    <div class="bottle">
        <div class="fluid">
            Fluid
        </div>

        <div class="fluid">
            Fluid
        </div>
    </div>

    <div class="fixed right">
        Fixed
    </div>
</div>