css 2 column but have full height regardless of div height_问答_开发者

css 2 column but have full height regardless of div height

开发者 https://www.devze.com 2023-01-20 17:27 出处：网络

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.

相关专题：css 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

css 2 column but have full height regardless of div height

精彩评论

关注公众号

热门标签

图文推荐

css 2 column but have full height regardless of div height

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：