CSS 網格不適合其父 div 的高度

Question

我構建了一個帶有標題、側邊和一些可滾動內容的 CSS 網格布局。

我正在嘗試在我設置width和height的容器div中測試該布局。

布局對容器的width反應良好，但對height反應良好，為什么會這樣，有沒有辦法修復它？

 body { margin: 0; } .container { width: 70%; height: 300px; /* How can I set the height? */ } .page { width: 100%; display: grid; grid-template-rows: 55px calc(100vh - 55px); /* height limitation on second row */ grid-template-columns: 200px auto; grid-template-areas: "nav header" "nav content"; } .nav { grid-area: nav; background-color: aqua; } .header { grid-area: header; background-color: grey; } .content { grid-area: content; background-color: red; overflow-y: auto; /* overflow condition on parent */ } article { height: 1000px; /* height set on child; triggers scroll */ }

 <div class="container"> <div class="page"> <div class="nav">Side nav</div> <div class="header">Header</div> <div class="content"> <article> <!-- new section for content --> <h1>title</h1> <p>A lot of content, simulated by .article height: 1000px</p> </article> </div> </div>

Answer 1

您必須為網格容器設置一個明確的高度，然后從grid-template-rows刪除calc並將其1fr作為第二行。

因此，您可以為page設置height: 100% （因此它繼承container的高度）並使用grid-template-rows: 55px 1fr （第二行現在擴展以適應剩余高度）。 請參閱下面的演示：

 body { margin: 0; } .container { width: 70%; height: 300px; /* How can I set the height? */ } .page { width: 100%; height: 100%; /* added */ display: grid; grid-template-rows: 55px 1fr; /* changed */ grid-template-columns: 200px auto; grid-template-areas: "nav header" "nav content"; } .nav { grid-area: nav; background-color: aqua; } .header { grid-area: header; background-color: grey; } .content { grid-area: content; background-color: red; overflow-y: auto; /* overflow condition on parent */ } article { height: 1000px; /* height set on child; triggers scroll */ }

 <div class="container"> <div class="page"> <div class="nav">Side nav</div> <div class="header">Header</div> <div class="content"> <article> <!-- new section for content --> <h1>title</h1> <p>A lot of content, simulated by .article height: 1000px</p> </article> </div> </div>