CSS: div expanding to window height, with margin-bottom fixed

Question

I've been trying to do something extremely simple, yet I can't make it work!

Here's what I'm trying:

---margin top: 15 px

---VARIABLE HEIGHT DIV (imagine a box-like element)

---margin bottom: 15px

I basically want the box to resize based on the browser window height.

Here's what I've been trying:

CSS

 body {
    background-color: #D0CDC5;
    height:100%
}

 #info_box {
    background-color: rgba(40,40,40,0.5);
    border: rgba(34,34,34,0.9) 1px solid;
    width: 350px;
    height: 100%;
    margin: 15px 0px 15px 20px;
}

 #info_box p {
    color: red;
}

HTML

<body>
<div id="info_box">
<p>Sample Content</p>
</div>
</body>

By the way, why is that the text appears 15px from the top of the div? Why isn't it flush?

Thanks a lot guys,

**EDIT

See this link, very good answer for all browser but IE6 and 7. another HTML/CSS layout challenge Thanks to @Hristo!

Hristo · Accepted Answer · 2011-04-24T02:54:44.063

2

UPDATE

Check out the fiddle...

Edit, Full Screen

Check out the fiddle... http://jsfiddle.net/UnsungHero97/uUEwg/1/

I hope this helps.
Hristo

edited Apr 24 '11 at 02:54

answered Apr 23 '11 at 21:23

Hristo

45,559
65
163
230

1

This is nice, but it's not a real padding. It won't work if the padding's job is to reveal something in the background – Pekka Apr 23 '11 at 22:30
1

@Pekka... good point. perhaps you could suggest a different solution? but I guess I was going off the fact that the user didn't specify anything along the lines of background images. – Hristo Apr 23 '11 at 22:34
1

@Hristo yeah. There's no really *perfect* solution that provides a real padding - `position: fixed` feels terribly hacky but as far as I can see, is the only way to achieve this – Pekka Apr 23 '11 at 22:59
There is a full screen background image. – jonasll Apr 23 '11 at 23:04
BTW, can you explain to me why the text appears so far away from the top of the box? I need to have negative padding to make it closer to the top edge. Help appreciated, thanks! – jonasll Apr 23 '11 at 23:08
@jonasll... what do you mean the text appears far away from the top of the box? Which browser are you using? Make sure you're looking at this link... http://jsfiddle.net/UnsungHero97/uUEwg/1/ – Hristo Apr 23 '11 at 23:11
@Hristo yes, the fiddle has the expected behavior, here is what i get : http://i.imgur.com/4gzTi.png – jonasll Apr 24 '11 at 01:36
Update your question and post your code, or a link to a fiddle, please :) Also, do you ever expect that box with "Sample Content" to grow in height larger than the actual page? – Hristo Apr 24 '11 at 01:38
@Hristo Here's the fiddle: http://jsfiddle.net/ZXndM/ Same code, looks different from my page. (Screenshot above) In both Chrome and Firefox – jonasll Apr 24 '11 at 01:51
@jonasll... you have a `text-alight: right` in your paragraph where the text is. Get rid of it or change it to `text-align: left`. I don't know where you got that from, but I had no `text-align` properties in my code. http://jsfiddle.net/UnsungHero97/ZXndM/2/ – Hristo Apr 24 '11 at 02:00
@Hristo I understand that, but I still don't understand why the text shows at 30 px from the top of the box :S – jonasll Apr 24 '11 at 02:07
@Hristo I am in the dark. Look at this fiddle:http://jsfiddle.net/Gqndm/ --- Now look at this screenshot using the exact same code: http://i.imgur.com/Bl3ve.png --- :S – jonasll Apr 24 '11 at 02:17
@jonasll... haha dude, in the fiddle I just showed you, http://jsfiddle.net/UnsungHero97/ZXndM/2/, the text is aligned to the left and to the top. http://i.imgur.com/1BH9X.png I don't see where you're getting your 30px from the top. for the record, sorry for this going back and forth :/ – Hristo Apr 24 '11 at 02:19
@jonasll... just saw your last comment. let me think for a while during dinner. – Hristo Apr 24 '11 at 02:21
@Hristo , Thanks so much, I appreciate your help! Let me know if you think of anything! – jonasll Apr 24 '11 at 02:25
@jonasll... check out the update. also, check out this answer... http://stackoverflow.com/questions/5768029/another-html-css-layout-challenge/5768262#5768262 if you don't care about supporting IE 7 or below – Hristo Apr 24 '11 at 02:53
Thanks! I gave you the props in the question (EDITED) since I don't have enough reputation to push your answer up! I'm loving this site! Thanks again! – jonasll Apr 24 '11 at 12:37
@jonasll... much appreciated. I don't think answers can be "pushed up". "accepted answers" that show up first. Would be nice to get an upvote :) Glad I could help though. Take care. – Hristo Apr 24 '11 at 15:57

score 0 · Answer 2 · answered Jul 16 '14 at 13:34

If you always use a consistent browser resolution, then it is doable. But if your screen size changes, depending on the device you use (tablet, mobile etc.), then this cannot be accomplished though CSS alone.

I have done this dynamically using jQuery.

score 0 · Answer 3 · answered Apr 23 '11 at 20:59

0

if you don't need to support IE6, and this is not part of a bigger layout, there is an easy way:

#info_box {

position: fixed;
left: 0px;
top: 15px;
right: 0px;
bottom: 15px;

}

alternatively, you could make #info_box stretch the full height, and put a position: absolute div into it with the same data as above.

I'm not entirely sure whether there's a way to do this without absolute or fixed positioning, because no matter whether you use padding or margin, you'll always end up adding 30 pixels to what is already 100% of the height. I'm happy to be proven wrong though.

answered Apr 23 '11 at 20:59

Pekka

442,112
142
972
1,088

@Downvoter: Care to explain your reasoning? If you have a better suggestion, let's hear it. – Pekka Apr 23 '11 at 22:30
@Pekka... would you mind providing a fiddle, I'm curious as to how you're doing this :) – Hristo Apr 23 '11 at 23:23
@Pekka... not a problem. So you have an issue that I can overcome, but my solution still has another issue. With yours, if the height of the content gets larger than the height of the window, it doesn't expand... http://jsfiddle.net/UnsungHero97/kRMBB/4/. With my new solution, the height of the container doesn't expand, but the text doesn't get cut off... http://jsfiddle.net/UnsungHero97/uUEwg/4/ how do we overcome both of our problems?!? – Hristo Apr 23 '11 at 23:30
@Hristo mm, good question! I'm not sure whether there's an easy way around either. With mine, the bottom position is always fixed; with yours, the content's height is always fixed (although it might be possible to fix it using a well-placed `overflow: hidden`, I'm not sure. I guess that depends on what one needs this for. I'm calling it a day, if you figure out a perfect solution drop me a comment. – Pekka Apr 23 '11 at 23:35
@Pekka... will do. Take care! – Hristo Apr 23 '11 at 23:37
@Pekka: I seem to have fixed this exact problem in a new question: http://stackoverflow.com/questions/5768029/another-html-css-layout-challenge and +1 because your answer certainly doesn't deserve the downvote. – thirtydot May 02 '11 at 00:47

score 0 · Answer 4 · answered Apr 23 '11 at 21:10

Elements get their height based on the content inside them. So you already have an element that is centered and that will have margin top and bottom of 15px from the top and bottom of you site's body.

But if you want an element that will always be centered middle of screen, filling all but 15px top and 15px bottom, it is not achievable with "conventional" means. It will either have to be an image or a re-sizable box that will have a scroll-bar if the content is bigger than screen size.

Anyways, if that is what you want, give it a fixed size and height, and use position:fixed.

CSS: div expanding to window height, with margin-bottom fixed

4 Answers4

UPDATE