3栏布局与非滚动流体宽度的侧边栏（的jsfiddle）

Question

我期待创建一个三列布局，其中左栏是一个固定的宽度和中间和右边的列是剩余的宽度的各50％的。我还希望左侧和右侧的列不会滚动。

我在两种不同的方式取得了部分成功。 The first创建满足动态列的目标，但右侧栏与页面scolls。我做了一个固定位置左列和另一个固定位置容器，它们一起占据了整个页面。然后，将右侧边栏放置在宽度设置为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

的窍门在这里会被同时设置中间和右边的cols到剩余的50％空间。

你可以与钙（）做这样的：

#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>