无法设置其父元素的最小高度设置为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％的元素的百分比高度

回答

相关问题