Question

我尝试了很多2和3列css布局，但似乎没有做我想做的事情，我无法弄明白。

我想要实现的是有效的双列显示，左侧（例如160像素宽）具有灰色背景，页面的中心部分（例如600像素）是白色的，其余部分是右边的页面与左边的页面（灰色）相同。注意，我说灰色要简单，我实际上需要这样的东西： background =“rgb（220,220,220）url（'../ images / bg.png'）repeat-x;”

这是一个1像素宽，400像素高的图像，可以呈现'淡入淡出'的外观。

但是，我需要将每个部分的颜色重复到浏览器窗口的底部，而不仅仅是最高div的高度。我找到的所有示例都使用底部的页脚/ div来将div捕捉到相同的高度（或类似的方法），如果内容小于浏览器的高度，它就会停在那里。

有人可以帮忙吗？

顺便说一句，我宁愿不要因为有一个巨大的高度给予滚动条而作弊。另外，当我说背景颜色为灰色时，我目前有一个400高度的白色到灰色褪色1像素宽的图像，我覆盖在灰色的顶部以模拟渐变。

Answer 1

确实

<html>
<head>
</head>
<body style='background:#eeeeee'>
  <div id='col1' style='width:160px; background:#eeeeee; height:100%; 
       float:left;'>hi</div>
  <div id='col2' style='width:600px; background:#ffffff; height:100%; 
       float:left;'>hi</div>
</body>
</html>

为你工作？但它确实在顶部和底部留下了一点空隙。

Answer 2

我使用了600x1图片：http://vidasp.net/tinydemos/background.html

Answer 3

我认为Sam走在正确的轨道上......可以稍微扩展他的解决方案：

身体 { 宽度：100％; 高度：100％; 余量：0; 填充：0; 背景：＃555; } .COLUMN一 { 宽度：160像素; 高度：100％; 余量：0; 填充：0; 背景：＃555; 向左飘浮; } .COLUMN二 { 宽度：600px的; 高度：100％; 余量：0; 填充：0; 背景：#FFF; 向左飘浮; }

第一栏在这里第二栏在这里

Answer 4

通常，这样的事情可以通过几张图片来完成。身体背景图像将是1像素高的图像，在灰色（#dcdcdc）背景上具有660像素宽的白色区域。为了防止多个垂直白色条纹，图像将非常宽（3000像素，优化的托盘保存为157字节的PNG）。您当前的淡入淡出背景将应用于全宽标题div。这会在主要内容区域的顶部留下一个丑陋的位置，在主要内容区域中最外层的div上使用负边距（以及需要补偿的任何填充顶部）来覆盖它。

Answer 5

晚了好，从来没有。认为这可能会有所帮助：

htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

您可以查看此@ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

css 2列，但无论div高度如何都具有全高

5 个答案: