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

所以我做了一些調查，結果發現這個問題已經解決了幾次。如果父元素的最小高度設置爲百分比值，則無法設置百分比高度，這聽起來很合邏輯。無法設置其父元素的最小高度設置爲100％的元素的百分比高度

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

我有一個堆疊在父元素中的標題和body元素，這樣我就可以給父元素一個box-shadow。這樣陰影不會重疊，看起來很奇怪。所以我的解決方案是根本不設置父元素的高度，因此它將是可變的，但這樣我就不能將子元素設置爲百分比，因爲父元素高度沒有設置。

對於這一切，使一些更有意義，這裏是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); 
}

而且，這裏是一個Fiddle。

只是要清楚，我設置的#body_parent高度時遇到問題，並且父元素是#content_parent

有什麼辦法，我可以實現我想要什麼？評論

後

來源

2015-02-24 YSbakker

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

編輯從body, html{}

Demo

來源

2015-02-24 14:20:19 4dgaurav

刪除height: 100%但會高度仍然是動態的？我的意思是，如果我將內容添加到#body_parent元素，如果內容超過100％，那麼＃content_parent的高度仍會改變？感謝您的努力:) – YSbakker 2015-02-24 14:27:15

是的，因爲您希望它的最小高度爲100％，我只是在問題說明中陳述的原因上增加了100％的高度。 – 4dgaurav 2015-02-24 14:28:50

[Fiddle]（http://jsfiddle.net/0c1koxsc/2/）我嘗試添加一些專業內容，但似乎並沒有擴大。有沒有解決方案？ – YSbakker 2015-02-24 14:38:33

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

回答

相關問題