內容溢出的網格容器

Question

我目前正在處理以下CSS / Grid布局。

我遇到的問題是，當我將文本寫入擴展超出實際視口的中心一列時，三列div的內容卻沒有按預期增長。

實際發生的是該文本僅出現在頁面下方的某個位置。

刪除height:100vh的height:100vh屬性.wrapper解決此問題，但是，這最終消除了我的標頭div。

關於這里出什么問題有什么想法嗎？

 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .item-header { grid-area: header; background-color: blue; } .item-nav { grid-area: navigation; background-color: grey; } .item-leftcol { grid-area: column-left; background-color: green; } .item-centercol { grid-area: column-center; } .item-rightcol { grid-area: column-right; background-color: yellow; } .item-footer { grid-area: footer; background-color: black; } .wrapper { height: 100vh; min-height: 100vh; display: grid; grid-auto-rows: auto; grid-template-columns: 15% 70% 15%; grid-template-rows: 6.5% 7.5% 79% 7%; grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer"; } 

 <div class="wrapper"> <div class="item-header"></div> <div class="item-nav"></div> <div class="item-leftcol"></div> <div class="item-centercol"></div> <div class="item-rightcol"></div> <div class="item-footer"></div> </div> 

Answer 1

不要在身體上使用height:100% ，而要使用min-height ，然后在內容欄1fr 79％的1fr似乎可以解決此問題。

 * { margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; } .wrapper { height: 100vh; display: grid; grid-template-columns: 15% 70% 15%; grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer"; grid-template-rows: 6.5% 7.5% 1fr 7%; } .item-header { grid-area: header; background-color: blue; color: white; } .item-nav { grid-area: navigation; background-color: grey; } .item-leftcol { grid-area: column-left; background-color: green; } .item-centercol { grid-area: column-center; } .item-rightcol { grid-area: column-right; background-color: yellow; } .item-footer { grid-area: footer; background-color: black; color: white } 

 <div class="wrapper"> <div class="item-header"></div> <div class="item-nav"></div> <div class="item-leftcol"></div> <div class="item-centercol"> <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem magni molestiae excepturi necessitatibus. Minus, necessitatibus iusto quis quod praesentium quibusdam. Excepturi sint temporibus nostrum quis sed mollitia aliquid distinctio at. </div> </div> <div class="item-rightcol"></div> <div class="item-footer"></div> </div> 

Answer 2

您已經用百分比定義了明確的行：

grid-template-rows: 6.5% 7.5% 79% 7%

在某種程度上，這是可行的，因為您在容器上指定了固定的高度：

height: 100vh

每行都會以其定義的高度進行渲染，因為百分比高度值通常需要“父母” height值的參考點才能起作用（ 更多詳細信息 ）。

但是，一旦刪除了該高度聲明，子級上的所有百分比值都會失敗–它們會回退到auto ，這意味着內容高度。 但是由於沒有內容，所以行折疊為0。因此，整個布局都折疊了。

 .wrapper { min-height: 100vh; display: grid; grid-auto-rows: auto; grid-template-columns: 15% 70% 15%; grid-template-rows: 6.5% 7.5% 79% 7%; grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer"; } .item-header { grid-area: header; background-color: aqua; } .item-nav { grid-area: navigation; background-color: lightgrey; } .item-leftcol { grid-area: column-left; background-color: lightgreen; } .item-centercol { grid-area: column-center; } .item-rightcol { grid-area: column-right; background-color: yellow; } .item-footer { grid-area: footer; background-color: gray; } * { margin: 0; padding: 0; } 

 nothing to see here <div class="wrapper"> <div class="item-header"></div> <div class="item-nav"></div> <div class="item-leftcol"></div> <div class="item-centercol"></div> <div class="item-rightcol"></div> <div class="item-footer"></div> </div> 

如果要訪問具有固定高度的容器中的溢出內容，請使用overflow屬性：

.item-centercol {
  overflow: auto;
 }

 .wrapper { height: 100vh; display: grid; grid-auto-rows: auto; grid-template-columns: 15% 70% 15%; grid-template-rows: 6.5% 7.5% 79% 7%; grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer"; } .item-header { grid-area: header; background-color: aqua; } .item-nav { grid-area: navigation; background-color: lightgrey; } .item-leftcol { grid-area: column-left; background-color: lightgreen; } .item-centercol { overflow: auto; /* NEW */ grid-area: column-center; } .item-rightcol { grid-area: column-right; background-color: yellow; } .item-footer { grid-area: footer; background-color: gray; } * { margin: 0; padding: 0; } 

 <div class="wrapper"> <div class="item-header">header</div> <div class="item-nav">navigation</div> <div class="item-leftcol">left col</div> <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> <div class="item-rightcol">right col</div> <div class="item-footer">footer</div> </div> 

如果要使整個布局隨內容擴展，請使用min-height並在行上將百分比單位從fr切換為fr ：

 .wrapper { min-height: 100vh; display: grid; grid-auto-rows: auto; grid-template-columns: 15% 70% 15%; grid-template-rows: 6.5fr 7.5fr 79fr 7fr; grid-template-areas: "header header header" "navigation navigation navigation" "column-left column-center column-right" "footer footer footer"; } .item-header { grid-area: header; background-color: aqua; } .item-nav { grid-area: navigation; background-color: lightgrey; } .item-leftcol { grid-area: column-left; background-color: lightgreen; } .item-centercol { grid-area: column-center; } .item-rightcol { grid-area: column-right; background-color: yellow; } .item-footer { grid-area: footer; background-color: gray; } * { margin: 0; padding: 0; } 

 <div class="wrapper"> <div class="item-header">header</div> <div class="item-nav">navigation</div> <div class="item-leftcol">left col</div> <div class="item-centercol">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div> <div class="item-rightcol">right col</div> <div class="item-footer">footer</div> </div> 

jsFiddle演示

更多信息：

• CSS網格布局中的百分比和fr單位之間的差異
• 為什么百分比高度在我的div上不起作用？