将子 div 高度限制为父容器高度
ask*_*ons 5 html javascript css grid flexbox
我希望图表div 的高度能够一直延伸到其父容器 ( graph-container ) 的末尾，但不会超出它。我尝试将图形的高度设置为 100% 并继承，但它们都会导致它延伸超过其父容器的底部边缘（我不想使用溢出：隐藏）。有没有办法在图形上设置高度属性，以便它自动将其高度设置为正确的值？
电流输出：
我想要的是：
当前代码：
* {
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>您看到的溢出发生是因为已经有一个元素占用了父元素的一些height: 100%空间，所以加上另一个元素的高度将明显超过父元素的高度。
解决问题的方法有多种。
我推荐以下两种方法之一：
但是，您也可以使用以下方法解决它们：
- CSS
calc() - JavaScript
CSS 弹性盒
父级需要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 网格
家长需要display: grid和grid-template-rows: auto 1fr。
grid-template-rows: auto 1fr使第二个子项占用其他子项获得在没有 -unit 的情况下定义的各自空间后剩余的剩余空间fr。
在这里，<h1>获取其所需的空间，并将所有剩余空间赋予.graph。
/* 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: grid;
grid-template-rows: auto 1fr;
}
.graph {
border-color: red;
}<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>CSScalc()
font-size与 的关系height
与sergey kuznetsov 的解决方案一样，您可以猜测height（仅适用于小尺寸！）等于font-size。
这并不总是正确的，因为height实际上取决于line-height，这又取决于当前使用的字体。
问题如图所示
例如，这line-height大约比给定字体1.05高 - 倍。font-size由于浏览器无法显示小于px- 单位的内容，因此小数位会被有效地截断。
这使得该方程仅适用于较小的 值font-size，如下面的示例所示。
示例（toInt()截去小数位）：
toInt(20px of 'font-size' * 1.05) = 20px of 'height'toInt(60px of 'font-size' * 1.05) = 63px of 'height'
这意味着，虽然这有效（对于小font-size值）
calc(100% - 20px - 3px)：（20px由于font-size，3px由于border-width）
/* 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;
}
h1 {
font-size: 20px;
}
.graph {
height: calc(100% - 20px - 3px);
display: block;
border-color: red;
}<div class="graph-container">
<h1>Title</h1>
<div class="graph">Graph</div>
</div>...这不起作用（对于大font-size值）
calc(100% - 60px - 3px)：（60px由于font-size，3px由于border-width）
/* 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;
}
h1 {
font-size: 60px;
}
.graph {
height: calc(100% - 60px - 3px);
display: block;
border-color: red;
}<div class="graph-container">
<h1>Title</h1>
<div class="graph">Graph</div>
</div>这就是为什么最好实际定义height-property 本身，而不是依赖font-size或line-height与其相同height（显然并不总是如此）。这让我们...
使用 CSS 自定义属性
您将第二个子项的高度设置为剩余空间，其中calc(100% - TITLE_HEIGHT)是TITLE_HEIGHT另一个子项的高度，<h1>。
我们可以使用CSS 自定义属性来设置高度以减少“幻数”的数量，这使得稍后重构代码变得更容易，并且可能已经更容易阅读。
我用的--title-height是高度。
自定义属性只能在元素本身及其子元素中访问，这意味着我们需要在其父元素中定义它.graph-container。
现在我们可以通过如下方式--title-height解析它来使用的值：var()
var(--title-height)
/* 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 {
--title-height: 26px;
height: 60vh;
width: 70vw;
display: block;
}
h1 {
height: var(--title-height);
}
.graph {
height: calc(100% - var(--title-height));
display: block;
border-color: red;
}<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>JavaScript
使用JS时，我们需要设置父元素的高度以及<h1>元素的高度，并计算 的剩余高度.graph。.graph可以使用 来将剩余高度设置为 的高度Element.style.height。
/* The answer */
var container = document.querySelector('.graph-container');
var title = document.querySelector('h1');
var graph = document.querySelector('.graph');
var remainingHeight = container.clientHeight - title.clientHeight;
graph.style.height = remainingHeight + "px"; // Make sure it is of unit "px"/* 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;
}
.graph-container {
height: 60vh;
width: 70vw;
}
.graph {
border-color: red;
display: block;
}<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>这种方法的问题是，一旦找到高度就会被固定。这将导致.graph不响应。为了实现.graph响应式，我们需要观察父级是否使用ResizeObserver.
每次父级调整大小时，都会重新计算 的大小.graph。
/* The answer */
var container = document.querySelector('.graph-container');
var title = document.querySelector('h1');
var graph = document.querySelector('.graph');
new ResizeObserver(() => {
graph.style.height = container.clientHeight - title.clientHeight + "px";
}).observe(container);/* 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;
}
.graph-container {
height: 60vh;
width: 70vw;
}
.graph {
border-color: red;
display: block;
}<div class="graph-container">
<h1>Graph Container</h1>
<div class="graph">Graph</div>
</div>