Geek Answers Handbook

Inner div 100% height does not work inside div with minimum height

I have a div ( #child ) that will not expand to the full height of its parent ( #parent ). I set the height for both html and body . It works if I set the parent height to 100%, but I want the parent to have the minimum height and the child to the full parent height.

HTML:

 <html> <body> <div id="parent"> <div id="child"> <p>This area should be have the same height as it parent.</p> </div> </div> </body> </html>

CSS

 html, body, header, h1, p { margin: 0; padding: 0; } html { background-color: #DDD; height: 100%; } body { background-color: #DAA; height: 100%; } #parent { min-height: 70%; height: auto !important; height: 70%; background-color: #AAD; } #child { height: 100%; /* why isn't this working ? */ width: 80%; margin: auto; background-color: #ADA; }

JSFiddle: http://jsfiddle.net/nxVNX/11/

+4
source share
3 answers
 height: auto !important;

Never use !important because it cannot be overestimated; working with it is harmful. This did not work because it always used height: auto; not height: 70%;

A rule that has a property! important, no will always apply where this rule appears in the CSS document.

Therefore, I recommend that you delete this line and it will work.
Look for more information on What is important in CSS? .

+1
source

It works when you remove the !important; property !important; . Maybe a problem? I tried several other methods, but they did not work, so the solution given above may be the only one, I think.

+2
source

Not sure why this is not working, but it will work

 #parent { min-height: 70%; height: 100% !important; height: 100%; background-color: #AAD; }
0
source

More articles:


All Articles