将子div高度限制为父容器高度[重复]
我希望graph div的高度能够一直延伸到其父（graph容器）容器的末端，但不能超过它。我已经尝试将图形的高度设置为100%和inherit，但这两种设置都会导致图形延伸到父容器的底部边缘（我不想使用overflow:hidden）。有没有办法在图形上设置height属性，使其自动将其高度设置为正确的值？
当前代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
}
.graph-container {
border: 3px solid black;
height: 60vh;
width: 70vw;
margin-top: 10vh;
}
.graph {
height: 100%;
width: 100%;
border: 3px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>
</div>
</body>
</html>共有2个答案
我还想提出一个使用calc（）的解决方案。即：
height: calc(100% - 23px);
其中23px是h1标签（font-size： 20px），边框图形类为3像素（边框： 3px纯红）。
在本例中，子div的高度将整齐地适合父div。
css prettyprint-override">* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
}
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
}
.graph-container {
border: 3px solid black;
height: 60vh;
width: 70vw;
margin-top: 10vh;
}
.graph {
height: calc(100% - 23px);
width: 100%;
border: 3px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>
</div>
</body>
</html>出现溢出的原因是已经有一个元素占用了父元素的一些空间，因此高度：100%加上另一个元素的高度将明显超过父元素的高度。
有不同的方法来解决这个问题
我推荐以下两种方法之一：
- CSS Flexbox
- CSS网格
但是，您也可以使用以下方法解决它们：
- CSS
calc（） - JavaScript
父级需要display:flex和flex direction:column在列中布局其子级。
应该增长到占用剩余空间的子级需要flex-grow:1。
/* Ignore; only for displaying the example */
* {
margin: 0;
font-size: 24px;
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.graph-container, .graph {
border: 3px solid black;
box-sizing: border-box;
}
/* The answer */
.graph-container {
height: 60vh;
width: 70vw;
display: flex;
flex-flow: column; /* Shorthand for ('flex-direction' | 'flex-wrap') */
}
.graph {
flex-grow: 1;
border-color: red;
}<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>-
问题内容： 我的CSS中包含以下内容。所有边距/边距/边界均全局重置为0。 现在，当我将HTML编写为 页面正确呈现。但是，当我检查元素时，显示为高。我会一直期待它扩大，直到年底和…为什么会出现这种情况？ 同样，页面呈现良好。这种行为使我感到困惑。 问题答案： 浮动内容不会影响其容器的高度。元素不包含不浮动的内容（因此，没有什么可以阻止容器的高度为0，就好像它是空的一样）。 在容器上进行设置将通过
-
问题内容： 我的页面结构为： 现在，DIV将具有更多内容，因此DIV的高度将根据子DIV的增加而增加。 但是问题是身高没有增加。如何使它的高度等于父代的高度？ 问题答案： 对于元素，添加以下属性： 然后针对这些：
-
问题内容： 我希望我的容器div获得其子代高度的最大值。不知道孩子的身高。我正在尝试使用JSFiddle。容器为红色。没有出现。为什么？ 问题答案： 添加以下属性： 这将迫使容器尊重其中所有元素的高度，而不考虑浮动元素。 更新 最近，我正在一个需要此技巧但需要允许溢出显示的项目中工作，因此，您可以使用伪元素清除浮动，从而有效地实现相同的效果，同时允许所有元素上的溢出。
-
问题内容： 我有一个带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” 而不给其指定高度？ 在示例中，粉红色也应占据白色空间。 与此问题类似：如何使div占据剩余高度？ 但是我不想摆 绝对的位置 。 问题答案： 可以通过多种方式扩展子级以填充剩余的空间，具体取决于您希望获得的浏览器支持以及是否具有定义的高度。 样本 格网 CSS的布局提供了另一种选择，尽管它可能不如F
-
http://jsfiddle.net/s8g4e/ 类似于这个问题：如何使div占据剩余高度？ 但我不想给位置绝对。
-
问题内容： 我有一个具有以下结构的网站： 导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。 无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同？ 问题答案： 注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 我建议您看看使用Cross-Browser CSS和NoHacks的等高列。 基本上，以与浏览器兼容的方式使用CSS做到这一点并不是一