Question

当内容未完全占据整个主体时，我希望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>

This是上述代码到JS Fiddle的链接。我希望div即使内容很小也要扩展到整个身体高度，而且div应该随着内容的增加而扩展。

This是一个类似的问题，但是该解决方案似乎不适用于我。我读过许多类似的问题，但没有一个对我有用。我无法弄清楚。

Answer 1

这是因为body块的高度未明确指定。

相对于高度的百分比计算生成框的包含块。如果包含的高度没有明确指定块（即，取决于内容高度），并且此元素不是绝对定位的自动计算。根元素上的百分比高度是相对的到最初的包含块。

我的解决方案是将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>

Answer 2

.inner{
    height: 100%;
    background-color: blue;
}

.outer{
    width: 70%;
    min-height:100%;
    min-height:calc(100% - 80px);
    background-color: green;
    padding:40px;
}

https://jsfiddle.net/arashgh/vj62o9nw/

min-height属性无法在CSS中正常工作

2 个答案: