具有两列的居中固定宽度容器的CSS布局;一列固定宽度，第二列延伸到页面末尾

Question

以下是截图：

我唯一的挑战是是否可以将左栏从容器中溢出。这有可能吗？容器没有bg，只是出于视觉目的。

#container { width: 960px; margin: 0 auto }
#left-column { ??? }
#right-column { width: 200px; float: right }

有关我想要实现的目标的详细信息，请参阅另一个屏幕截图：

960容器的两侧标有青色标尺。这些航班在顶部和底部有一个边界，一直延伸到左边，并在960集装箱外扩展。

Answer 1

这样的事情会做到：

<div id="container">
    <div id="right-column"></div>
    <div id="left-column"></div>    
</div>

CSS：

#container { width: 100%; margin: 0 auto; display:inline-table }
#left-column { height:500px; background:#00ff00;width:auto}
#right-column { width: 150px; float: right;height:500px; background:#00ffff }

在此处查看：

http://jsfiddle.net/h9XuQ/

Answer 2

如果你坚持把左边的div放在容器里面，没有javascript的帮助是不可能的。

如果你想要的只是占用页面的其余部分并且不介意它放在哪里，你可以尝试以下方法：

#theLeftColumn {
    position：fixed; /*or absolute if it is a direct child of body*/
    margin-top:0px; /*set to other value if you need to leave space for header menu */
    left: 0px;
    /*280px = (width of container)/2 - (width of right fixed width column)
            = 960px/2-200px */
    width: -moz-calc(50% + 280px);
    width: -webkit-calc(50% + 280px);
    width: calc(50% + 280px);
    /*if it is div, the default of display is block, else it is needed to be set */
    display:block;
}

请注意，calc函数需要CSS3。

Answer 3

你需要的是一个包装元素。 内容显然放在一个大小必须大于960px的包装元素中。 我想这都是关于以下代码的，

<div id="wrapper">
 <div id="960container">
  <div id="left-column"></div>
  <div id="right-column"></div>
 </div>
</div>

这就是你想问的问题吗？ 不确定您是否想知道原点或样式问题。