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
  • 102 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MattEvans

Dani AI

Generated

Quick summary and modern approach. The layout issue you describe is a very common one: you want the main content area to reach the bottom of the viewport when the page is short, but still expand naturally when content is longer. As warned, some older solutions are visual tricks; ’s caution about cross-browser behavior is sensible; and ’ point about base element sizing points in the right direction. For a robust, future-friendly solution use flexible layouts (Flexbox or Grid) or viewport units rather than brittle percentage heights.

A reliable Flexbox pattern (apply to the page root or a wrapper) makes the content area grow to fill available space while keeping header/footer in place:

/* on the page wrapper or body */
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* main content expands to fill leftover space */
main {
  flex: 1 0 auto;
}

If you prefer Grid, set three rows and let the middle row stretch:

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, content, footer */
}

Notes and troubleshooting:

  • Mobile browsers can mis-report 100vh because of dynamic address bars. Workaround: set a --vh CSS variable from window.innerHeight in JS and use min-height: calc(var(--vh, 1vh) * 100).
  • Percentage heights require an explicit height on the parent; that’s why hacks like setting root heights were common. Flexbox/Grid remove that requirement.
  • Check DOCTYPE (standards mode), reset default body margins, and inspect computed heights in devtools. Floated children can collapse parent height — use a clearfix or avoid floats for layout.
  • For very old browsers, fallbacks include display: table-cell tricks or visual background columns (the “faux” approach mentioned).

For deeper reading on the mechanics and browser support, the MDN Flexbox guide is a good, up-to-date reference: Flexbox on MDN.

Recommended Answers

All 3 Replies

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.