Home/ Questions/Q 8158175
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T17:31:31+00:00

I have div ( #child ) which won’t expand to the full height of

  • 0

I have div (#child) which won’t expand to the full height of it’s parent (#parent). I’ve set the height for both html and body. It works if I set the parent’s height as 100%, but I want the parent to have a minimum height, and the child to expand to the parent’s full height.

HTML:

<html>
    <body>
        <div id="parent">
          <div id="child">
              <p>This area should be have the same height as it's 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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    height: auto !important;

    Don’t ever use !important, because it cannot be overriden, work with it is harmfull.
    It didn’t work because it always used height: auto; not height: 70%;

    A rule that has the !important property will always be applied no
    matter where that rule appears in the CSS document.

    So i recommend to you remove this line and it will works.

    Have look for more information about What does !important mean in CSS?.

    • 0