无法将其父元素的最小高度设置为100％的元素的百分比高度设置

Question

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和CSS：

[HTML] [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] [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 请注意，设置#body_parent的高度并且父元素为#content_parent时遇到问题

Is there any way I can achieve what I want? 有什么办法可以实现我想要的？

Answer 1

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{} 移除height: 100%来自body, html{}

Demo 演示版

无法将其父元素的最小高度设置为100％的元素的百分比高度设置

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-02-24 14:20:19

无法将其父元素的最小高度设置为100％的元素的百分比高度设置

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-02-24 14:20:19

解决方案1
3 已采纳 2015-02-24 14:20:19