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

Question

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

我以两种不同的方式取得了部分成功。第一个创建实现了动态列目标，但右侧边栏与页面一起滑动。我用一个固定位置的左列和另一个固定位置的容器来做这个，它们一起占据了整个页面。然后我将右侧边栏放在第二个容器中，宽度设置为 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}. 理想情况下，我希望内容与主页一起滚动。

非滚动代码相对简单，只涉及具有静态宽度的固定左右侧边栏。

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

Answer 1

使用 csscalc() function

小提琴

这里的技巧是将中间和右边的列都设置为剩余空间的 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>