2列,左侧一个适应内容,右侧一个占用所有剩余空间

时间:2013-08-13 15:14:07

标签: html css two-columns

列应该:

  • 是全高
  • 如果需要,
  • 有垂直滚动条,但没有水平

这是我到目前为止所得到的(连同页脚和标题)

http://jsfiddle.net/HZMCX/11/

我的代码存在的问题是右侧面板文本在屏幕中间开始而不是在左侧面板旁边。

 [Ignore this, this is so stackoverflow allows me to post the link to jsFiddle ]

有关如何解决此问题的任何想法? 谢谢!

1 个答案:

答案 0 :(得分:0)

您的代码可以比您目前拥有的代码更简单地应用:

考虑简单地浮动侧柱和主要内容并在两者上设置流体宽度。 http://jsfiddle.net/MygUu/

将整个布局包装在.container类中,并将overflow设置为hidden。

.container {
  overflow: hidden;
}

此外,使用ID选择器设置样式最好是。希望有所帮助。