将子div高度限制为父容器高度

您看到的溢出发生是因为已经有一个元素占用了父元素的一些height: 100%空间，所以加上另一个元素的高度将明显超过父元素的高度。解决问题的方法有多种。我推荐以下两种方法之一：CSS 弹性盒CSS 网格但是，您也可以使用以下方法解决它们：CSScalc()JavaScriptCSS 弹性盒父级需要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这并不总是正确的，因为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>这就是为什么最好实际定义 -propertyheight本身，而不是依赖font-size或line-height与其相同height（显然并不总是如此）。这让我们...使用 CSS 自定义属性您将第二个子项的高度设置为剩余空间，其中calc(100% - TITLE_HEIGHT)是TITLE_HEIGHT另一个子项的高度，<h1>。我们可以使用CSS 自定义属性来设置高度以减少“幻数”的数量，这使得稍后重构代码变得更容易，并且可能已经更容易阅读。我用的--title-height是高度。自定义属性只能在元素本身及其子元素中访问，这意味着我们需要在其父元素中定义它.graph-container。现在我们可以通过如下方式--title-height解析它来使用的值：var()var(--title-height)...这不起作用（对于大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>这种方法的问题是，一旦找到高度就会被固定。这将导致.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>

将子div高度限制为父容器高度

2回答