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

【问题标题】：css 2 column but have full height regardless of div heightcss 2 列，但无论 div 高度如何，都具有全高
【发布时间】：2010-10-17 22:07:17
【问题描述】：

我尝试了许多 2 列和 3 列 css 布局，但似乎没有一个能满足我的要求，我无法弄清楚。

我想要实现的实际上是一个两列显示，左侧（例如 160 像素宽）具有灰色背景，页面的中心部分（例如 600 像素）是白色，其余部分右侧的页面与左侧的页面相同（灰色）。注意，我说灰色是为了简单，我实际上需要类似的东西：背景="rgb(220,220,220) url('../images/bg.png') 重复-x;"

这是一个 1 像素宽、400 像素高的图像，以提供“渐变为灰色”的外观。

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

谁能帮忙？

顺便说一句，我宁愿不通过提供滚动条的巨大高度来作弊。另外，当我说背景颜色为灰色时，我目前有一个 400 高度的白色到灰色褪色 1 像素宽的图像，我将其叠加在灰色之上以模拟渐变。

【问题讨论】：

'不要使用表格进行布局，使用 css'，每个人都说（并且有充分的理由） - 但可悲的事实仍然是这样简单的事情不能很好地完成CSS(2)，不使用肮脏的把戏。
除非我弄错了，否则您正在寻找的是“圣杯”，在过去几年中长期争论不休。alistapart.com/articles/holygrail我说的对吗？

标签： css height

【解决方案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>

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

【讨论】：

请将CSS规则放在<STYLE>元素内
你好，这些都可以，但也许我说得不够清楚（我在底部说明了），背景颜色而灰色需要背景图像，例如背景：rgb(220,220,220) url('../images/bg.png') 重复-x;但这不起作用。此图片高 400 像素，看起来左/右列的顶部正在从白色中消失。

【解决方案2】：

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

【讨论】：

见上面对 Sam Dufel 的评论

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

身体 { 宽度：100%；高度：100%；边距：0；填充：0；背景：#555; } .column-one { 宽度：160px；高度：100%；边距：0；填充：0；背景：#555; 向左飘浮; } .column-2 { 宽度：600 像素；高度：100%；边距：0；填充：0；背景：#FFF; 向左飘浮; }

第一栏在这里此处为第二栏

【讨论】：

请将所有 CSS 规则放在 <STYLE> 元素内
查看下面对 Sam Dufel 的评论

【解决方案5】：

迟到总比永不好。认为这可能会有所帮助：

html

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

CSS

#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

【讨论】：