• 0

Container 100% height but WITH margin


Question

Hi guys,

i've been struggling with this for over an hour now and cant figure it out, what i want is this (look at attachment):

I want my content area (lightest blue) to stretch all the way to my footer (dark blue), which must always be at the bottom, and i want the complete thing (content+footer) to have a 12px margin from the edges of the screen.

HOW the hell do i do this :angry:?

Oh, BTW: with the caps in the title i mean that i got it pretty much to work without the margin but when i put a margin in it, it looks good except the browser has scrollbars :(

post-81063-0-44382400-1297313639.png

Link to comment
Share on other sites

Recommended Posts

  • 0

 margin: 12px;

Add that to your main container. BUT if you want it to actually work correctly you need to have the container's width set to 100%. You can have it 12px from the browser window if it's not going to be fluid. Just won't work that way.

Link to comment
Share on other sites

  • 0

 margin: 12px;

Add that to your main container. BUT if you want it to actually work correctly you need to have the container's width set to 100%. You can have it 12px from the browser window if it's not going to be fluid. Just won't work that way.

Yeah the width is already at 100%, the problem is that when i get it to be at 100% the browser will see it as 100% PLUS 24px (2 x 12px margin) and it will create scrollbars..

negative margins don't work..

Link to comment
Share on other sites

  • 0

Then set it at a width equal to 12px away from browser window.

Euhm, lol?

I hope you mean that different than i think you do, because i can't just set it any size (in pixels) 12px from the border because when the browser window changes size the page does not. I also cannot do something like 95%, because that will also change and maybe be 12px in one resolution but maybe 30px in another..

Link to comment
Share on other sites

  • 0

I'm not recommending any particular solution here since it's been a while since I last did this kind of stuff, but you may want to look through:

http://www.google.com.tw/search?q=make+footer+stick+to+bottom

It's pretty much what you're looking for but coming from a different angle.

Yeah, thanks. But the problem is not the footer. I already have that at the bottom. It's the container that supposed to stretch to the footer, and the browser not having scrollbars. I have searched google myself before starting this topic ofcourse and there are a lot of solutions but not a single one has something about margins that i can find..
Link to comment
Share on other sites

  • 0

body{
 margin:12px;
}
.container{
 width:100%;
}

Should work for you I hope :)

Nope

Can't he just hide the scrollbars?

The scrollbars are there because the layout is wider than the screen, but even if i could hide them then they would also be hidden is i have more content than screen..
Link to comment
Share on other sites

  • 0

I'm using a descent browser. Safari.

But your testing on multiple browsers right?

Firefox doesn't seem to be rendering any issues.

Can you screenshot what you are trying to fix? Maybe I'm tired but I'm a little confused as to what the issue is..

Link to comment
Share on other sites

  • 0

<snip>

Sigh, I'm tired. I can't read. I see it's 100% height :p.

I guess I still don't get why you were apt on 12px margins.. when now you're actually declaring a static width and have WAY wider margins. Did you nix out that idea then?

see: https://skitch.com/jordanriane/rp9it/nambu

(lol and yes that's my current browser width.. i know it's retarded. shh)

Link to comment
Share on other sites

  • 0

I guess I still don't get why you were apt on 12px margins.. when now you're actually declaring a static width and have WAY wider margins. Did you nix out that idea then?

That's what I'm confused about!

Link to comment
Share on other sites

  • 0

But your testing on multiple browsers right?

Firefox doesn't seem to be rendering any issues.

Can you screenshot what you are trying to fix? Maybe I'm tired but I'm a little confused as to what the issue is..

Sure, see attachments. Same for Chrome, but that's also Webkit (as is Safari).

Ofcourse i'll test it in multiple browsers eventually but for now lets just make it work in at least one.

<snip>

Sigh, I'm tired. I can't read. I see it's 100% height :p.

I guess I still don't get why you were apt on 12px margins.. when now you're actually declaring a static width and have WAY wider margins. Did you nix out that idea then?

Yeah i changed that, want to fix one problem at a time.

post-81063-0-46377800-1297319039.png

post-81063-0-52096900-1297319047.png

Link to comment
Share on other sites

  • 0

See my screenshot. Is that your problem you're having with that CURRENT code? Or what?

So.. either you're still wanting to fix this or you nixed the idea. Which is it.

Link to comment
Share on other sites

  • 0

See my screenshot. Is that your problem you're having with that CURRENT code? Or what?

So.. either you're still wanting to fix this or you nixed the idea. Which is it.

I still want to fix it, and it's still the same problem. There are scrollbars but there is no content (so, unnecessary scrollbars). I don't get what you don't get to be honest.

To show you, i changed it back to 100% width. Now there are vertical and horizontal scrollbars. Same problem as just vertical, or just horizontal. also same fix. if there is one.

Link to comment
Share on other sites

  • 0

I still want to fix it, and it's still the same problem. There are scrollbars but there is no content (so, unnecessary scrollbars). I don't get what you don't get to be honest.

To show you, i changed it back to 100% width. Now there are vertical and horizontal scrollbars. Same problem as just vertical, or just horizontal. also same fix. if there is one.

See, now that I can actually SEE your code (and of course the actual issue you're having..)

http://dev.icupcake.org/neowin/TwyLight.html

Working just fine here. However, the only thing you're going to have to remove is your box-shadow. That's going to cause the horizontal scrolling. Although if you really MUST have it on then you can toss in:

 overflow-y: hidden;

See this too: http://stackoverflow.com/questions/2344056/firefox-css3-using-overflow-hidden-and-box-shadow / http://doctype.com/boxshadow-element-width

It's a common issue (had it myself months back as did someone else on Neowin.)

Also, I adjusted your CSS a bit. Ignore the issue with your #footer, you'll resolve that on your own after you clean through it.

  • Like 2
Link to comment
Share on other sites

  • 0

Uhm. LOL.

You're going to have a vertical scrollbar if the content pushes beyond the browser's window. Adjust your code if you don't want a vertical scrollbar. Don't see why you'd need height to be 100% if you don't want a scrollbar. Set a static height then.

  • Like 2
Link to comment
Share on other sites

  • 0

omg, you really don't get it. LOL indeed.

i want the content area to stretch all the way down to the footer at all times. Why would i WANT a scrollbar?

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.