Member Avatar for izzi81

I'm hoping someone can give me a bit of advice. I've been making websites as a hobby for about 10 years now, I taught myself what to do with a book from the library. Of course things have moved on in 10 years, and recently I've been trying to get to grips with css to design my sites.

Although I can understand the basics, there are some things I just can't seem to figure out. Mainly this is getting my page (or in css my main content layer) to stretch to the bottom of the page, however long the page is. It always seems to work in one browser, and not in another, and I browse the net for tips and find things that work here, but not there, and so on. It seems to be quite a headache for something that should not be such a weird thing to want to do!

What I am wondering is a/. is there some easy way to sort it out, or b/. is there any good website/book which would teach me how to sort it out if there is no straightforward solution.

I'm quite exacting in how I want my sites to look and it gets depressing when I think I've got it right but then view it somewhere else and it looks a bit 'scruffy'!

  • 4 Contributors
  • 3 Replies
  • 92 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MattEvans
Member Avatar for autocrat

Okay... can you be a little more specific about the "stretch the full height".

By definition, an element (such as a div etc.) will either automatically expand to contain the content... or remain a set size if you apply a Height to it (barring IE, which treats height as min-height!).

You may be thinking of things lie having "columns" that appear to reach to the bottom of the page etc.?

INote the use of the word "appear".
It's very important... alot of the CSS styling for things like columns is a bit of "smoke and mirros"... things are not as they seem.
So I can only recommend that you go look up things like Faux Columns and Skidoo layouts.

See if those are the sort of thign you are after.

Member Avatar for MidiMagic

If you want the page to exactly fill the screen for all browsers, you can't do that.

Member Avatar for MattEvans

Have you tried setting height:100% to the body and html element? CSS:

html,body{
  height:100%;
}

This should allow you to make content stretch when it's "too short" to fill the page ( anything height:100% in the page should fill up the height of the page, which shouldn't ever be smaller than the height of the window ). It wont work the other way though ( it wont shrink large content to fill a small page ). Also wont work everywhere, particularly in ancient browsers that dont have any grip of CSS, but these browsers tend to have this behaviour automatically..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.