CSS 網格布局：強制固定布局

Question

我制作了以下網格布局（用於即將到來的 email 客戶端）：

 body { margin:0px; font-family:tahoma; font-size:12px; }.grid-container { display: grid; grid-template-areas: "header header header" "mailboxes messages messages" "mailboxes viewer viewer" "footer footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 34px 1fr 30% 34px; grid-template-rows: 34px 1fr 70% 34px; grid-gap: 0px; height: 100vh; }.header { grid-area: header; background:#aaa; }.mailboxes { grid-area: mailboxes; background:#ccc; }.footer { grid-area: footer; background:#aaa; }.gMessages { grid-area: messages; background:#bbb; }.viewer { grid-area: viewer; background:white; }

 <div class="grid-container"> <div class="header">header</div> <div class="mailboxes">mailboxes</div> <div class="footer">footer</div> <div class="gMessages"> messages </div> <div class="viewer"> </div> </div>

另見此處： https://jsfiddle.net/w4m1psnh/4/

它反應靈敏，一切都很好。 問題是 - 當將數據填充到消息區域（ .gMessages ）時，該區域將擴大並破壞我的布局：

它還會放大頁面，使頁腳變得不可見。 我無法找到如何將區域保持在其固定高度並保持整個布局響應（消息：30% 高度，查看器 70% 高度）。 我還嘗試分配固定高度並將 overlay-y 應用於消息內容 - 但沒有成功。 那么我將如何強制網格布局保持其指定的尺寸？

Answer 1

您在這里對同一屬性有 2 個聲明：

grid-template-rows: 34px 1fr 30% 34px;
grid-template-rows: 34px 1fr 70% 34px;

第一個將被忽略。 因此，假設您希望頂部部分為 30%，請保留第二部分。

現在我們需要解決溢出問題。

添加overflow-y: auto到.viewer和.gMessages

你最終會得到這樣的結果：

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0: shrink-to-fit=no"> <title>TITLE</title> <style> body { margin;0px: font-family;tahoma: font-size;12px. }:grid-container { display; grid: grid-template-areas; "header header header" "mailboxes messages messages" "mailboxes viewer viewer" "footer footer footer": grid-template-columns; 200px 1fr: grid-template-rows; 34px 1fr 30% 34px: grid-gap; 0px: height; 100vh. }:header { grid-area; header: background;#aaa. }:mailboxes { grid-area; mailboxes: background;#ccc. }:footer { grid-area; footer: background;#aaa. }:gMessages { grid-area; messages: background;#bbb: overflow-y; auto. }:viewer { overflow-y; auto: grid-area; viewer: background;white; } </style> </head> <body> <div class="grid-container"> <div class="header">header</div> <div class="mailboxes">mailboxes</div> <div class="footer">footer</div> <div class="gMessages"> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> messages<br/> </div> <div class="viewer"> </div> </div> </body> </html>

Answer 2

為什么要定義grid-template-rows兩次？

.grid-container {
  display: grid;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
}

沒有那個必要。 瀏覽器（在級聯期間）簡單地使第一個規則無效並使用第二個規則。 換句話說，第一個規則被忽略。

選擇一個或另一個，或者只使用auto （基於內容的高度）。

將此添加到您的代碼中：

.grid-container {
  display: grid;
  /* grid-template-rows: 34px 1fr 30% 34px; */
  grid-template-rows: 34px auto 1fr 34px; /* adjustment */
}

.gMessages {
  grid-area: messages;
  overflow: auto;  /* new */
}

 .grid-container { display: grid; grid-template-areas: "header header header" "mailboxes messages messages" "mailboxes viewer viewer" "footer footer footer"; grid-template-columns: 200px 1fr; /* grid-template-rows: 34px 1fr 30% 34px; */ grid-template-rows: 34px auto 1fr 34px; /* adjustment */ height: 100vh; }.gMessages { grid-area: messages; background: #bbb; overflow: auto; /* new */ }.header { grid-area: header; background: #aaa; }.mailboxes { grid-area: mailboxes; background: #ccc; }.footer { grid-area: footer; background: #aaa; }.viewer { grid-area: viewer; background: white; } body { margin: 0px; font-family: tahoma; font-size: 12px; }

 <div class="grid-container"> <div class="header">header</div> <div class="mailboxes">mailboxes</div> <div class="footer">footer</div> <div class="gMessages">text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text <div class="viewer"></div> </div>

jsFiddle 演示

CSS 網格布局：強制固定布局

問題描述

2 個解決方案

解決方案1
1 已采納

解決方案2
0 2020-04-24 16:02:06

CSS 網格布局：強制固定布局

問題描述

2 個解決方案

解決方案1 1 已采納

解決方案2 0 2020-04-24 16:02:06

解決方案1
1 已采納

解決方案2
0 2020-04-24 16:02:06