CSS Height working but min-height doesn't work

Question

I am having a strange rather weird problem. The problem is a small one that is I want to set min-height to 100% that is the content of the page should span whole screen of he user and if possible the page should extend down if content exceeds 100%. A simple way would be to set min-height:100% and to set height:auto that is exactly what I want but regardless of how many times I try it the problem remains there.

I am using height auto and min-height:100% on all the elements but it doesn't work. If I remove min-height to include only height:100% then it works like a charm but then when the content is larger it overflows whole footer.

Please help me here is css:

html, body, container, row, col-lg-3, col-lg-9 {
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .container {
     max-width: 1170px;
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .col-lg-3 {
     min-height:100%;
     height:100%;
 }
 .col-lg-9 {
     min-height: 100%;
     height: 100%;
 }

Here is the page showing the problem : http://contestlancer.com/ai/GP/

@Kaushik I am using columns in twitter bootstrap I have posted the link in the post. Putting code here will take too much space please take a look — Ahmar Ali, Jul 31 '13 at 11:43
So u want left side menu contents with blue background to cover the whole page?? — Guruprasad J Rao, Jul 31 '13 at 11:52
@Kaushik yes the center content must also cover whole page. In short the whole content must cover whole page — Ahmar Ali, Jul 31 '13 at 11:53
u said if u remove min-height and set only height then it will work but it will overflow the footer right?? Y dont you try adding z-index to the footer so that it will always remain on the top of anything..? Did u try it...?? — Guruprasad J Rao, Jul 31 '13 at 11:57
@Kaushik even if it remains at top it will overlap other content don't want to do that way — Ahmar Ali, Jul 31 '13 at 12:00
Ok.. Have you tried setting css overflow property for the.. so that extra contents whatever appears on the div will be displayed inside the div with a scroll bar.. — Guruprasad J Rao, Jul 31 '13 at 12:03
If you don't want the scroll effect, then you could always add overflow:hidden;, and it will hide anything that goes below the 100% — aashnisshah, Jul 31 '13 at 12:34

score 16 · Accepted Answer · edited May 23 '17 at 12:17

16

Yes this is a pain but that's how it works. Height can be inherited from positioned parents but not when these have a min-height property.

Children of elements that have a min-height set to 100% cannot inherit their parent's height via percentage...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 specs :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

Use position: relative; height: 100% on containers to work around the problem, and add min-height: 100%; to the deepest child.

edited May 23 '17 at 12:17

Community

1
1

answered Jul 31 '13 at 11:31

Armel Larcier

15,747
7
68
89

Thanks for answer but I don't really know what do you mean? So I keep the css as it is but add position relative to every container? – Ahmar Ali Jul 31 '13 at 11:34
That doesnt work bro... position will not effect here to the div – Guruprasad J Rao Jul 31 '13 at 11:40
1

@AhmarAli yes that's what I mean but I don't have an all-made answer for you... What I usually do is set min-height: 100% on the deepest children and height: 100%; position: relative; on containers – Armel Larcier Jul 31 '13 at 14:01

CSS Height working but min-height doesn't work

1 Answers1

Linked

Related