您看到的溢出發生是因為已經有一個元素占用了父元素的一些height: 100%空間，所以加上另一個元素的高度將明顯超過父元素的高度。
解決問題的方法有多種。
我推薦以下兩種方法之一：
但是，您也可以使用以下方法解決它們：
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
這并不總是正確的，因為height實際上取決于line-height，這又取決于當前使用的字體。
問題如圖所示
例如，這line-height大約比給定字體1.05高 - 倍。font-size由于瀏覽器無法顯示小于px- 單位的內容，因此小數位會被有效地截斷。
這使得該方程僅適用于較小的 值font-size，如下面的示例所示。
示例（toInt()截去小數位）：
這意味著，雖然這有效（對于小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>
