css 2 column but have full height regardless of div height
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 any开发者_运维技巧one 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.
Does
<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>
work for you? It does leave a little gap at the top and bottom, though.
I used a 600x1 image: http://vidasp.net/tinydemos/background.html
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.
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
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this @ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
加载中,请稍侯......
精彩评论