Geek Answers Handbook

Make div and child divs expand at least the full height of the browser window

I need to have images that extend along the left and right sides of my main div body (actually for a kind of shadow shadow effect under the div).

It would be simple if it were not for the fact that I want this div to be extensible , and I need it to work in IE7 and IE8, and I want it to expand to the bottom of the page.

I tried using polyfills to get CSS3 magic, but they didn't work either (I tried PIE and some filters without any luck).

I feel like I tried everything ... that brings me here! This is as long as I only got CSS / html, I feel that I should be able to work it, but there is still no cigar:

<div class="left-image"> <div class="right-image"> main body text </div> </div>

with the following css:

 html,body{ height: 100% } .left-image{ background: transparent url('image/url.png') repeat-y top left; min-height: 100%; /*this alone works for making outer div extend browser & content height*/ min-width: 960px; max-width: 1280px; margin: 0 auto; } .right-image{ background: transparent url('image/url.png') repeat-y top left; height: 100%; /*this only makes the div the height of its content*/ }

This causes div.left-image to fill the height of the browser window or the height of the content (whichever is greater), but div.right-image only matches the height of the content (so if the content is smaller than the browser window, it will not be filled).

How to get around this? Just use jQuery?

+7
source share
9 answers

This is a common problem without a simple solution. CSS3 will solve it, but support for older browsers means that it is not going to leave soon.

check

http://www.alistapart.com/articles/fauxcolumns/

and see if it points you in the right direction. You essentially have to fake it (fake columns) or use javascript as far as I know.

+2
source

One cheap solution I used in the past was to set the top and bottom positions to zero.

 .left-image{ background: transparent url('image/url.png') repeat-y top left; /*min-height: 100%;*/ position: absolute; top: 0px; bottom: 0px; min-width: 960px; max-width: 1280px; margin: 0 auto; } .right-image{ background: transparent url('image/url.png') repeat-y top left; /*height: 100%;*/ position: absolute; top: 0px; bottom: 0px; }
+1
source

You should probably use a background image - see http://jsfiddle.net/ZXpyT/ for an example. Note that this assumes that the body volume will have a width of 960 pixels; the idea would be to create an image (repeatable vertically) that replaces the current individual images left / right.

+1
source

you can specify multiple backgrounds for your div shell instead of two sections, for example

 .wrapper{ background: url('left.jpg'),url('right.jpg'); background-repeat: repeat-y, repeat-y; height:100%; }

Sorry, I missed the browser matrix you want to support ... well, that’s coming. Believe me, this ... this worked for me in all browsers.

 <html> <head> <title></title> <style type="text/css"> .left-image{ background:grey; min-height:100%; height:100%; width:100%; position:absolute; } .right-image{ background:#eee; min-height:100%; height:100%; width:50%; margin:0 auto; } </style> </head> <body> <div class="left-image"> <div class="right-image"> main body text </div> </div> </body> </html>
+1
source

Why don't you give .left-image height:100% ? In some browsers, in order to get the width / height of the browser at 100%, you must set each containing element to 100%.

+1
source

How about height: inherit; ? It should take the height of the parent tag as it is.

+1
source

You use min-height on the left image, why not on the right image?

0
source

I ended up using:

 $(".left-image, .right-image").height($(document).height());

(I used it when loading a document, when resizing a window and when creating ajax calls that could expand the page)

I think my new rule will be that if I need more than twenty minutes to figure out using only css, I'm going to make an easy way and use javascript / jquery ...

-one
source

There is a very simple solution. Add this to your css display: bock;

-one
source

More articles:


All Articles