具有非滚动流体宽度侧边栏的 3 列布局 (jsFiddle)

Question

我希望创建一个三列布局，其中左列是固定宽度，中间列和右列各占剩余宽度的 50%。我还希望左右列是非scolling的。

我通过两种不同的方式取得了部分成功。 The first 创建实现了动态列目标，但右侧边栏与页面一起滑动。我用一个固定位置的左列和另一个固定位置的容器来完成这个，它们一起占据了整个页面。然后我将右侧边栏放在第二个容器中，宽度设置为 50%。

<section id=leftSidebar>
    <p> leftSidebar </p>
</section>

<div id=main>

    <section id=middle>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
    </section>

    <section id=rightSidebar>
        <p> rightSidebar </p>
    </section>
</div>

上述布局的另一个问题是，由于#main {overflow: auto}，内容会滚动。理想情况下，我希望内容与主页一起滚动。

non-scrolling code 比较简单，只涉及一个固定的左右侧边栏，宽度不变。

如果可能的话，我想只用 css 来实现这一点。

Answer 1

使用 css calc() function

FIDDLE

这里的窍门是将中间和右边的列都设置为剩余空间的 50%。

你可以用 calc() 来做这样的事情：

#middle, #rightSidebar
{
    width: calc(50% - 40px); /* equals half of 100% - 80px */
}

Answer 2

在您的示例中，右列包含在主 div 中。在打开列部分之前尝试关闭它：

<section id=leftSidebar>
    <p> leftSidebar </p>
</section>

<div id=main>

    <section id=middle>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
        <article> middle </article>
    </section>

</div>

    <section id=rightSidebar>
        <p> rightSidebar </p>
    </section>