这里是一个网站的简化布局：固定宽度左侧栏，可变宽度的右列
#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像素，然后转到屏幕底部。右列应占用宽度的其余部分，并包含一大堆浮动图像（类似于Google图像搜索的样子）。我如何使用CSS和HTML做到这一点？我宁愿不使用JavaScript。
只需添加一个200像素保证金右列的左边缘，并漂浮在左边的列。
#left_column {
width: 200px;
float: left;
}
#right_column {
margin-left: 200px;
}
100％身高不会按照您认为会奏效的方式工作。
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;
}
不完全正确。您的左边距应该是200px，而不是20％。 – Raceimaztion
@Raceimaztion：正确，并予以纠正。 –
在我找到Ariel的解决方案之前，我尝试将左列的宽度设置为固定值，并为右列设置一个百分比值，但效果并不理想。直到某一点，当浏览器窗口的宽度减小时，右列中的文本会在列中进行换行，但是在此之后（取决于右列所用的百分比），文本将环绕在列的左侧下一行的页面。如果您为右列设置** margin-left **，则始终保留在列中。在FF，IE，Chrome中有相同的行为。 –
试试这个小提琴 -
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;
}
小提琴似乎已经过时。现在有一些完全不同的东西。 –
我认为高度需要有一个像素值 - 似乎百分比值不增加高度。
<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"> </div>
<div id="right_column"> </div>
这些解决方案并不适合我。根据我对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%;
}
我只想补充一点，这个解决方案为我多固定列和可变右列：漂浮的所有列*除最右边的列以外，然后将最右边的列的margin-left **属性设置为其他列宽度的总和（加上边距）。 –