所以我做了一些研究，结果发现这个问题已经解决了几次。如果父元素的最小高度也设置为百分比值，则不能以百分比设置高度，这听起来有点合乎逻辑。
这个问题的答案是将父元素设置为固定数量的像素。但是，这对我来说是个问题，因为我希望页面将百分比值设置为高度。
我有一个 header 和 body 元素，它们堆叠在父元素中，这样我就可以给父元素一个框阴影。这样阴影就不会重叠并且看起来很奇怪。所以我的解决方案是完全不设置父元素的高度，因此它是可变的，但那样我就不能将子元素设置为百分比，因为没有设置父元素的高度。
为了使这一切更有意义，这里是 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 时遇到了问题
有什么方法可以实现我想要的吗？
最佳答案
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 */
}
评论后编辑
从 body, html{} 中移除 height: 100%
关于html - 无法设置其父元素的最小高度设置为 100% 的元素的百分比高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28698101/