css 2 列，但无论 div 高度如何，都有完整的高度
我尝试过很多 2 列和 3 列 css 布局，但似乎没有一个能达到我想要的效果，而且我无法弄清楚。
我想要实现的是有效的两列显示，其中左侧（例如 160 像素宽）具有灰色背景，页面的中心部分（例如 600 像素）为白色，页面的其余部分为右侧与左侧相同（灰色）。请注意，我说灰色是为了简单起见，我实际上需要类似的东西： 背景=“rgb（220,220,220）url（'../images/bg.png'）重复-x;”
这是一个 1 像素宽、400 像素高的图像，具有“淡入灰色”的外观。
但是，我需要每个部分的颜色重复到浏览器窗口的底部，而不仅仅是最高 div 的高度。我发现的所有示例都使用底部的页脚/div 将 div 对齐到相同的高度（或类似的方法），如果内容小于浏览器的高度，它就会停在那里。
有人可以帮忙吗？
顺便说一句，我不想因为滚动条的高度很大而作弊。 另外，当我说背景色灰色时，我目前有一个 400 高度的白色到灰色褪色的 1 像素宽图像，我将其叠加在灰色之上以模拟渐变。
I've tried many 2 and 3 column css layouts but none seem to do what I want and I can't figure it out.
What I'm trying to achieve is effectively a two column display with the left side (e.g. 160 pixels wide) having a background of grey, a central section of the page (e.g. 600 pixels) that is white and the remainder of the page to the right having the same as the left (grey). Note, I said grey to make it simple, I actually need something like:
background="rgb(220,220,220) url('../images/bg.png') repeat-x;"
Which is a 1 pixel wide, 400 pixel height image to give a 'fade to grey' look.
However, I need the colours of each section to repeat to the bottom of the browser window, not just the height of the heighest div. All the examples I find make use of a footer/div at the bottom to snap the divs to the same height (or similar approach) and if the content is less than the height of the browser it just stops there.
Can anyone help?
btw, I'd rather not cheat by having a huge height giving scroll bars.
also, when I say background color grey, I currently have a 400 height white to grey faded 1 pixel wide image that I overlay on top of grey to simulate a gradient.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
对你有用吗
？不过，它确实在顶部和底部留下了一点间隙。
Does
work for you? It does leave a little gap at the top and bottom, though.
我使用了 600x1 图像： http://vidasp.net/tinydemos/background.html
I used a 600x1 image: http://vidasp.net/tinydemos/background.html
通常，类似的事情可以通过几张图像来完成。身体背景图像将是一个 1 像素高的图像，在灰色 (#dcdcdc) 背景上有一个 660 像素宽的白色区域。为了防止出现多个垂直白色条纹，图像会非常宽（优化调色板后的 3000 像素可保存为 157 字节的 PNG）。您当前的淡入淡出背景将应用于全角标题 div。这会在主要内容区域的顶部留下一个丑陋的地方，您可以通过在主要内容区域的最外层 div 上使用负的 margin-top （以及您需要补偿的任何 padding-top ）来覆盖它。
Typically, something like this would be done with a couple of images. The body background image would be a 1-pixel-high image with a 660-pixel-wide white area on a grey (#dcdcdc) background. To prevent multiple vertical white stripes, the image would be very wide (3000 pixels with an optimized pallete saves as a 157-byte PNG). Your current fade background would be applied to a full-width header div. That leaves an ugly spot at the top of the main content area, which you would overpaint by using a negative margin-top (and whatever padding-top you need to compensate) on the outermost div that lives in the main content area.
我认为 Sam 走在正确的轨道上......可以稍微扩展他的解决方案：
身体
{
宽度：100%；
高度：100%；
保证金：0；
填充：0；
背景：#555；
}
.第一栏
{
宽度：160px；
高度：100%；
保证金：0；
填充：0；
背景：#555；
浮动：左；
}
.第二列
{
宽度：600px；
高度：100%；
保证金：0；
填充：0；
背景：#FFF；
浮动：左；
}
Column one here
Column two here
I think Sam is on the right track... Can expand on his solution slightly:
body
{
width:100%;
height:100%;
margin:0;
padding:0;
background:#555;
}
.column-one
{
width:160px;
height:100%;
margin:0;
padding:0;
background:#555;
float:left;
}
.column-two
{
width:600px;
height:100%;
margin:0;
padding:0;
background:#FFF;
float:left;
}
Column one here
Column two here
迟到总比不到好。认为这可能有帮助：
html
css
您可以查看此@ http ://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
Better late then never. Thought this might help:
The htmls
The csss
You can view this @ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout