带CSS的全高柱？

Question

http://jsfiddle.net/ww7dN/

我正在尝试设计一个“分割”为2种颜色的页面（左侧为绿色，右侧为蓝色）。在每个部分我想要一个列。第一个问题是颜色不会填满整个页面。第二个问题是，当我调整页面大小时，水平滚动条不会出现。

我做错了什么？或者你有更好的方法来实现这种效果？

如果CSS很复杂，我不会介意jquery解决方案。谢谢！

Answer 1

你的#container没有位置，所以它的孩子不知道填充谁的鞋子......

http://jsfiddle.net/ww7dN/1/

尝试添加到#container：

#container {
  position:absolute;
  height:100%;width:100%;
  left:0;top:0;
}

<小时/> 对于第二个问题，请将overflow:hidden更改为overflow:auto;到要水平滚动的容器。

从评论中更新 尝试添加

BODY {
  overflow-y:auto;
}

到body的css

Answer 2

尝试更改以下CSS：

#public {
position: absolute;
width:100%;
height:100%;
color:#fff;
}
#public #container {
height:100%;
}

另外， overflow：hidden会阻止滚动条出现。

Answer 3

给出一个位置：绝对到左边div;