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

Question

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

我以两种不同的方式取得了部分成功。 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() 函数

FIDDLE

这里的技巧是将中间列和右侧列都设置为剩余空间的 50%。

你可以用 calc() 这样做:

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