• 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

I was trying to do the same thing a while ago to get some white space above and below the main content area, while keeping a sticky footer (using the Ryan Fait footer method). Tried using 99% height and 1% padding or 1% margin values on the 'body' and 'html' tags, but it just wouldn't work in some browsers, wasn't sure why. Never figured out a useful solution either :(

Link to comment
Share on other sites

  • 0

Yeah, I obviously don't get it when I just fixed your code's issues. Obviously.

Have fun.

Yeah thanks for helping but you did not fix it :whistle:

I was trying to do the same thing a while ago to get some white space above and below the main content area, while keeping a sticky footer (using the Ryan Fait footer method). Tried using 99% height and 1% padding values on the 'body' and 'html' tags, but it just wouldn't work in some browsers, wasn't sure why. Never figured out a useful solution either :(

Yeah i'm beginning to think there isn't a proper solution. Too bad.

Link to comment
Share on other sites

  • 0

In fairness I don't think you're being very clear. I've read through this thread and while I think I now understand what you want, I'm not entirely sure.

Reduce the container height from 100% like Cupcakes suggested. If you want it to be scalable to different resolutions then don't set a static height, but why stick with 100% when it's obviously not giving you the results you want?

  • Like 3
Link to comment
Share on other sites

  • 0

Yeah thanks for helping but you did not fix it :whistle:

Yeah i'm beginning to think there isn't a proper solution. Too bad.

Dude your being pretty confusing.

What cupcakes is saying is right so lose the attitude, she's only trying to help. Something she didn't have to waste her time on.

Now back to the original issue.. Your kinda contradicting yourself.. It sounds like you want a flexible layout right? With equal margins on the left and right with a value of 12px right?

  • Like 3
Link to comment
Share on other sites

  • 0

In fairness I don't think you're being very clear. I've read through this thread and while I think I now understand what you want, I'm not entirely sure.

Reduce the container height from 100% like Cupcakes suggested. If you want it to be scalable to different resolutions then don't set a static height, but why stick with 100% when it's obviously not giving you the results you want?

I'm sorry, i'll explain exactly what i want a little bit better:

Currently it looks like image [1], with the footer under the content area, and the content area only being as big as the content in it. (one line of text). What i wánt is for the footer to stick to the bottom, and the content to stick to the footer, at all times. as you can see in image [2]

- There should not be any scrollbars

- The margin should be equal on all 4 sides

I hope this is clearer.

About you, misses Cupcake: You can call me a ******** an say my code sucks all you want on twitter but next time better say it to my face, instead of behind my back. or make your twitter private. You probably have a name to keep about being a MVC and you probably do that by posting in every topic even though you don't have a clue, but next time please stay away.

post-81063-0-21877400-1297322241.png

post-81063-0-08287500-1297322247.png

Link to comment
Share on other sites

  • 0

If you strip out all the padding, margins, and borders, the height of #container goes to 100%. Once you start adding all that stuff in, that's when the scroll bar happens (Even adding a 1px border causes a scrollbar). Might be a css glitch in browsers, not sure, but it doesn't appear that you have can it at 100%, without having a scroll bar, and the styling. You will just have to have a set min-height of a different number from the looks of it.

Link to comment
Share on other sites

  • 0

Currently it looks like image [1], with the footer under the content area, and the content area only being as big as the content in it. (one line of text). What i w?nt is for the footer to stick to the bottom, and the content to stick to the footer, at all times. as you can see in image [2].

- There should not be any scrollbars

- The margin should be equal on all 4 sides

Ah, hang on. It looks like image 1? Because that's not what I'm seeing in the previous examples you've provided. I'm seeing something that much more closely resembles image 2 (which is what you're aiming for, right?). And your screenshots of what you're actually seeing also match more closely with image 2. However, the problem that you noted was that there are scrollbars, which is because you've got your container set to 100% and then you've got a footer and the margins that you want.

Link to comment
Share on other sites

  • 0

Instead of using 100%, use like 70%, and then set the footer to 20%, and then set the margins to 5%. If you set borders, then you'll have to decrease the % a little to 19%, 69% etc...

Link to comment
Share on other sites

  • 0

In your case, I would make a container div and put the footer inside that one with relative positioning. Something like:

html,body {
	height: 100%;
}
#container {
	position: relative;
	height: auto !important;
	min-height: 100%;
}
#footer {
	position: absolute;
	bottom: 5px;
	height: 30px;
}

I realise this doesn't fix the issue with the content area not extending properly, but I think there should still be some ways / hacks to achieve the effect you're looking for. What I'm thinking is having the background of the container white, and then having an image faking the space between the content and the footer attached to the top of the footer or something to that effect. It's not pretty code-wise, but it's something that'll do the job short of a clean solution.

Link to comment
Share on other sites

  • 0

I think he wants a constant 12px margin, so % won't work there as it's proportionate to the browser's viewport.

I was going to go the route of a background image for the content but since images are static it wouldn't work.

Here is what I made just now... it's ugly and will probably be frowned upon by professionals. But it gets you what you want from the mockup.

I hope your content is on the light side :p

http://huesion.com/mockup/fauxfluid.html

Link to comment
Share on other sites

  • 0

What you are after is impossible using just css and here is why. You require that the content have a 12px margin from the top and you would like the content div to stretch and fill the page leaving a gap from the footer. Well, in order to do that the browser has to know the height of the div. Usually you would set the height to 100% of the browser window. But in your case you need a 12px gap and some in the bottom. There is no provision in css as of now to do a height calculation which would amount to 100% - 12px - height of footer. If you decide to go with 100% height and margins, you are going to have vertical scroll bars because the height will now be 100% + 12px + height of the footer and this vertical scroll bar will be present irrespective of the height of the browser window.

So the only way you can achieve your goal is if you use js.

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.