無法將其父元素的最小高度設置為100％的元素的百分比高度設置

Question

因此，我進行了一些研究，結果發現此問題已解決了幾次。 如果父元素的最小高度也設置為百分比值，則不能以百分比設置高度，這聽起來有點合乎邏輯。

該問題的答案是將父元素設置為固定數量的像素。 但是，這對我來說是個問題，因為我希望頁面將百分比值設置為高度。

我有一個標頭和主體元素，它們堆疊在父元素中，以便可以給父元素一個盒子陰影。 這樣，陰影不會重疊並且看起來很奇怪。 因此，我的解決方案是根本不設置父元素的高度，因此它是可變的，但是那樣我就不能將子元素設置為百分比，因為沒有設置父元素的高度。

為了使所有這些更有意義，這里是HTML和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);
}

另外，這是一個小提琴。

請注意，設置#body_parent的高度並且父元素為#content_parent時遇到問題

有什么辦法可以實現我想要的？

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 */
}

演示版

評論后編輯

移除height: 100%來自body, html{}

演示版

無法將其父元素的最小高度設置為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