5

live (work in progress) site

Basically, I have all of my site's content centered within a div that is a specified width and an intended height of 100% regardless of the actual length of the content. I've specified height:100%; for html, body, and #main however the div still comes up short as seen on this page- I don't want their to be any gap between the #main's grey box and the bottom of the screen. Is this possible? How?

AMC
  • 1,603
  • 11
  • 43
  • 74

3 Answers3

4

see this jsfiddle

html, body {height: 100%;}
.container {min-height: 100%;}

discussing this over here too.....

proper css to ensure that the body element fills the entire screen

Community
  • 1
  • 1
sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • 1
    The problem with this fiddle is that if there is another Div outside, the height of that will restrict that of the inner Div. Eg: http://jsfiddle.net/yVDXQ/5/ To avoid this, you would have to specify height for all the divs outwards from the one to stretch.. – Kjartan Aug 20 '12 at 19:48
  • yes. the inner div can't get larger than the div it is contained by. that's why you have to set the body to 100% - otherwise the wrapper or whatever doesn't have any height defined to reach for. but in this case - i didn't see a need to worry about that... – sheriffderek Aug 20 '12 at 19:59
  • 1
    Thank you for the help. I've replaced my original code with your updates. The issue I'm having is, they work find in [JSFiddle](http://jsfiddle.net/ATPHQ/), but not on my [live site](http://parlourdc.com/wp). Any ideas why that is? – AMC Aug 20 '12 at 20:49
  • it seems like there is a #container around the #main ... if you don't set that to 100% - then the #main div inside of it will not know what height to reference - like Kjartan was saying above. --- try that out --- set the container's height a few ways and see what happens --- p.s. have you created a child theme yet ? – sheriffderek Aug 20 '12 at 21:08
  • Ah, the `#container` ref was from when I was trying to sort this all out this morning and forgot to remove. Everything works as it should now, thanks! – AMC Aug 20 '12 at 21:23
  • 1
    @sheriffderek This doesn't stretch to page height, it stretches to window height. – Don Rhummy Aug 14 '14 at 23:22
  • How can I achieve the same in my question here: http://stackoverflow.com/questions/26365093/how-to-ensure-three-div-are-the-same-height-regardless-of-content – SearchForKnowledge Oct 14 '14 at 15:57
  • @DonRhummy --- You are right... I put a clearfix on the body in a project this morning... it seems to contain and allow for stretching... also, just floating the body left is easy.. http://codepen.io/sheriffderek/pen/lkscf – sheriffderek Oct 15 '14 at 22:04
  • @sheriffderek - How does your code work ? I thought `body{height: 100%;}` & div min-height should help. I don't understand why we need to select html & body for this to work. Thanks. – HelloWorldNoMore Apr 11 '16 at 22:05
  • 1
    @HelloWorldNoMore - `` doesn't know how "tall" it is... so, when you tell `` to be 100%, it also does't know what's going on... so it's a parent/child relative issue... It's really not awesome - and has it's own side-effects in the long run. You have to just choose how you'll deal with it, based on project. Check out viewport height too --- – sheriffderek Apr 12 '16 at 20:33
  • @sheriffderek - thanks. would be great if you could tell me a bit about the side effects. – HelloWorldNoMore Apr 12 '16 at 21:29
  • @HelloWorldNoMore - well, it's hard to give a list of "things that happen" - but if you tell your body to be 100% height of the browser, then it will be. - and if you do something where that's a problem, then it'll be a problem. All this parallax stuff is, personally, a pain and changes the natural flows of things. You may need to keep moving `min-height: 100%` down to children depending + maybe your JS Framework shoves some extra divs in there. Sometimes you just have to ignore that the body and html aren't really stretching technically - and just get the project done but it makes me sad. – sheriffderek Apr 13 '16 at 03:13
1

You can set position:absolute, and that should stretch it to the bottom. Seems as if that will work fine in Opera and Chrome at least.

That will, however, be in conflict with the video player below, and also push your copyright notice down below the page. Maybe you can move the notice up into the gray box though?

Kjartan
  • 18,591
  • 15
  • 71
  • 96
0

You can achieve by 2 ways:

1) Give Height to 100% if you don't know how long page could be.

html, body {
    height: 100%;
}
.yourContainerClass {
    min-height: 100%;
}

2) If you know how much you need to stretch vertically then you can use height in "vh(vertical height)".

.yourContainerClass{
    height:80vh;
}

I hope it will help you. Thank you!

Ambuj Khanna
  • 1,131
  • 3
  • 12
  • 32