固定宽度左列，可变宽度右列。

Question

以下是一个网站的简化布局：

#left_column {
  width: 200px;
  height: 100%;
}

<div id="left_column">
</div>

<div id="right_column">
  /* A bunch of 100px width photos that are being floated */
</div>

根据代码，我有一个左列和右列。左列应该是200像素宽，并延伸到屏幕底部。右列应占用其余的宽度，并包含一堆浮动图像（类似于谷歌图片搜索的样子）。如何使用CSS和HTML完成这个效果？我不想使用JavaScript。

- Michael

Answer 1

只需在右侧栏的左边缘添加200px的边距，并浮动左侧列。

#left_column {
  width: 200px;
  float: left;
}

#right_column {
  margin-left: 200px;
}

100%高度不会按照你想象的那样工作。

- Ariel

---

我只想补充一下，这个解决方案对于我来说适用于具有多个固定列和一个可变右列的情况：将所有列向左浮动，除了最右边的列，然后将最右边列的margin-left属性设置为其他列宽度之和（加上一个边距）。 - Adi Inbar

Answer 2

HTML：

<div id="leftcol">Demo text</div>
<div id="rightcol">More demo text</div>

CSS：

#leftcol{
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:200px;
    background-color:yellow;
}

#rightcol{
    width:100%;
    -moz-box-sizing: border-box; /*The rest of the browsers support this now*/
    box-sizing: border-box;
    margin:0;
    padding:0;
    padding-left:200px;
    min-height:2000px;
    background-color:blue;
}
​

演示

- Lucas Green

---

不太对。你的左边距应该是200像素，而不是20%。 - Raceimaztion

在我找到 Ariel 的解决方案之前，我尝试将左列的宽度设置为固定值，并为右列设置百分比值，但效果不佳。当浏览器窗口缩小时，右列中的文本会在列内换行，但在某一点之后（取决于右列使用的百分比），文本会在下一行绕到页面的左侧。如果您为右列设置 margin-left，则文本始终保持在列内。在 FF、IE 和 Chrome 中表现相同。 - Adi Inbar

Answer 3

试试这个代码片段 -

http://jsfiddle.net/hKyzT/

HTML（超文本标记语言）

<div id="left_column">
    /* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated */
</div>

<div id="right_column">
/* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated */
</div>

CSS

html, body, #wrapper, #left_column, #right_column { height: 100%; min-height: 100%; }


#left_column {
  width: 200px;
  float: left;
    border:1px solid green;
    height: 100%;
    min-height: 100%;
}

#right_column {
  margin-left: 200px; border:1px solid red;
}

- swapnesh

---

这个小工具似乎已经过时了。现在有完全不同的东西。 - Adi Inbar

Answer 4

我认为高度需要有像素值 - 百分比值似乎不能增加高度。

<style type="text/css">
#left_column {
    width: 20%;
    float:left;
    background-color:blue;
}
#right_column {
    width:80%;
    float:right;
    background-color:green;
}
div {
    height:1000px;
}
</style>

<div id="left_column">&nbsp;</div>
<div id="right_column">&nbsp;</div>

- mmertel

Answer 5

这些解决方案对我来说并不完全适用。根据我在http://derpturkey.com/two-columns-with-one-fixed-width-and-one-variable-width/上阅读的内容，我最终得到了类似于以下的东西：

#right_column {
    margin-left: 200px;
    float: left;
}

#left_column {
    float: left; 
    width: 200px;
    margin-left: -100%;
}

- uhezay