min-height属性无法在CSS中正常工作
[英]min-height property not working as expected in css
问题描述
当内容没有完全占据整个身体时，我希望div扩展到最大高度。 如果内容变大，则div也应随之变大。
以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
html{
height:100%;
}
body{
min-height: 100%;
background-color: lightblue;
margin:0;
}
.inner{
height: 100%;
background-color: blue;
}
.outer{
width: 70%;
height: 100%;
background-color: green;
padding:40px;
}
</style>
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis.
</div>
</div>
</body>
</html>
这是上面代码的JS Fiddle的链接。 我希望div即使内容很小也要扩展到整个身体高度，而且div应该随着内容的增加而扩展。
这是一个类似的问题，但是该解决方案似乎对我不起作用。 我读过许多类似的问题，但没有一个对我有用。 我无法弄清楚。
2 个解决方案
解决方案1
1 2018-12-15 13:45:00
这是因为未明确指定body块的高度。
相对于生成的盒子的包含块的高度计算百分比。 如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为auto。 根元素上的百分比高度是相对于初始包含块的高度。
我的解决方案是将inner的最小高度设置为100vh
body{ background-color: lightblue; margin:0; } .inner{ background-color: blue; min-height: calc(100vh - 80px); } .outer{ width: 70%; background-color: green; padding:40px; box-sizing: content-box; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi voluptatibus iure aspernatur maiores tempora deserunt reiciendis aliquid quod distinctio debitis eius, nostrum obcaecati modi cum. Possimus, eos nobis explicabo corporis. </div> </div> </body> </html>
解决方案2
1 2018-12-15 13:52:41
.inner{
height: 100%;
background-color: blue;
}
.outer{
width: 70%;
min-height:100%;
min-height:calc(100% - 80px);
background-color: green;
padding:40px;
}
最小高度未按预期工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.