Div 100% height

Russinating · 26 Aug 2008 at 18:11

Having trouble with making a div 100% the height of the page when the content is longer than the viewing area.

Basically it stays set at the screen resolution height (ie. 768) rather than expanding when the text scrolls off the bottom. How is this achievable?

TwoSaints · 26 Aug 2008 at 18:37

you can use a css style called min-height: 100% not sure if this is what you are looking for?

Russinating · 26 Aug 2008 at 18:38

Tried it but doesn't work.

The site in question is here: www.rghjones.co.uk/a1/

kkbigal · 26 Aug 2008 at 19:12

try adding this to your CSS:

Code:

body, html
{
     height:100%;
     padding:0;
     margin:0;
}
.test
{
     width:500px;
     height:100%;
}

Try putting a div with class="test" on your page and it should extend the full height of the browser.

Hmm - had a look at your site - looks like it fills the whole of the height to me, or do you just mean the sort of copyright notice/info at the bottom?

***Edit***

Scrub the code - I took a look at your css and saw you'd already got it there

LPL · 26 Aug 2008 at 20:10

Try looking here

http://www.positioniseverything.net/easyclearing.html

Tripnologist · 26 Aug 2008 at 20:30

It looks like what you're wanting to accomplish is a full height background image yeah?

Just apply the background image to your body tag and center it.

ruffneck · 27 Aug 2008 at 09:10

as already said, you might have to apply the

Code:

height: 100%;

rule to the body and html elements

actually after looking at the site, it seems you might have an open div somewhere, I haven't actually got time to check the code properly but one I thing I have noticed is your break tags

Code:

<br />

get rid of them and wrap a paragraph element around them instead

Code:

<p></p>

Russinating · 27 Aug 2008 at 14:30

Tripnologist said:
It looks like what you're wanting to accomplish is a full height background image yeah?

Just apply the background image to your body tag and center it.

Can't - already have a background image (the upper gradient).

Russinating · 27 Aug 2008 at 15:14

Couldn't make sense of the easy clearing method (or get it to work) so just changed the image 'priorities' around. That is, I made the body background image the vertical white and created a div to span along the top with gradient as its background.