CODEWITHSUNDEEP
htmlcss
YSbakker
YSbakker

Reputation: 707

Can't set percentage height of an element whose parent element has a min-height set to 100%

So I did a little research, and it turns out this issue has been addressed a few times. You cannot set a height in percentages if the parent element has a min-height set to a percentage value as well, which sounds kind of logical.

The answer to this problem would be to set the parent element to a fixed amount of pixels. However, this is kind of a problem for me since I want the page to have a percentage value set as height.

I have a header and body element which are stacked in a parent element, so that I can give the parent element a box-shadow. That way the shadows won't overlap and look weird. So my solution would be to not at all set the height of the parent element so it would be variable, but that way I can't set the child element to a percentage since, well, the parent element height is not set.

For this all to make a little more sense, here is the HTML and CSS:

[HTML]

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/animateheader.js"></script>
    </head>

    <body>
        <div id="content_parent">
            <!-- Header -->
            <div id="header_parent">

            </div>

            <!-- Body (homepage) -->
            <div id="body_parent">

            </div>
        </div>

        <!-- Footer -->
        <div id="footer_parent">

        </div>

    </body>
</html>

[CSS]

html,body {
    height:100%;
}

* {
    margin:0 auto;
    padding:0;
}

#content_parent {
    min-height:100%;
    max-width:1250px;
    min-width:750px;
    box-shadow:0 0 10px 2px rgb(100,100,100);
}

#header_parent {
    position:fixed;
    right:0;
    left:0;
    margin-left:auto;
    margin-right:auto;
    max-width:1250px;
    min-width:750px;
    height:50px;
    background-color:rgb(50,50,50);
    box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(100,100,100);
    -webkit-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(100,100,100);
    -moz-box-shadow:-6px 0 rgba(0,0,0,0), 6px 0 rgba(0,0,0,0), 0 6px 4px -2px rgb(100,100,100);
    border-bottom-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-bottom-right-radius:2px;
    border-top-left-radius:0;
    -webkit-border-top-left-radius:0;
    -moz-border-top-left-radius:0;
    border-top-right-radius:0;
    -webkit-border-top-right-radius:0;
    -moz-border-top-right-radius:0;
}

#body_parent {
    height:100%;
    max-width:1250px;
    min-width:750px;
    background-color:rgb(245,245,245);
}

Also, here is a Fiddle.

Just to be clear, I run into problems when setting the height of #body_parent and the parent element is #content_parent

Is there any way I can achieve what I want?

Upvotes: 0

Views: 379

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

add following css

#content_parent {
    min-height:100%;
    max-width:1250px;
    min-width:750px;
    box-shadow:0 0 10px 2px rgb(100, 100, 100);
    height:100%; /* add this */
}

Demo

Edit after comment

remove height: 100% from body, html{}

Demo

Upvotes: 3

Related Questions