CSS网格布局：强制固定布局
问题描述 投票：3回答：2
我为即将到来的电子邮件客户端进行了以下网格布局：
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应用于Message内容-没有成功。那么我将如何强制网格布局保持其分配的尺寸？
2个回答
2
投票
投票
您有一个设置为30%的行，而其中没有任何内容设置为70%的行。
您可以通过将空行的高度设置为空来使空行无效，直到您想使用它并最大化另一行。您也将希望通过此方法来管理溢出-y，因为这仍然只会使页面“增长”。
<!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>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<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 100% 34px;
grid-template-rows: 34px 1fr 0% 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: scroll;
}
.viewer
{
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/>
</div>
<div class="viewer">
</div>
</div>
</body>
</html>更改：
overflow-y：
.gMessages
{
grid-area: messages;
background:#bbb;
overflow-y: scroll;
}
[100% vs 0%：
grid-template-columns: 200px 1fr;
grid-template-rows: 34px 1fr 100% 34px;
grid-template-rows: 34px 1fr 0% 34px;
如果不进行这些更改，那么您将在页面上向下移动一个空白空间。
如果您要保持堆叠窗格的美观，则可以通过在.viewer上应用溢出-y并再次更改%heights来迫使其保持静态：
<!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>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<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-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;
overflow-y: scroll;
}
.viewer
{
overflow-y:scroll;
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/>
</div>
<div class="viewer">
</div>
</div>
</body>
</html>0
投票
投票
您为什么两次定义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>最新问题
- 用于在 Markdown 中高亮显示 Solidity 语法的 VSCode 插件？
- 如何在准备好Excel文件后立即将其上传到Azure Blob存储而不保存在本地？
- Minecraft Spigot 插件未运行
- Flutter 应用无法在 Android 模拟器上运行，但可以在 iOS 模拟器上运行
- 是否可以在 MediatR 中为多个通知编写一个处理程序
- “skb->protocol”应该设置成什么？
- 如何在 html 中获取多次出现，查找部分
- 无法解析polars_core，arrow::legacy，Dataframe是polars-lazy =“0.44.2”
- Django - 使用 get_FOO_display 进行聚合
- 在 Nginx 和 Passenger 中提供预压缩的缓存文件
- 边缘未出现在@xyflow//react（React Flow）中
- CSS 代码荧光笔 - 预代码标签中的边距
- 使用 FlowDirection 将 .NET MAUI 弹出按钮向右移动？
- C#.NET 中的 JPEG 2000 支持
- 对于大数据，什么时候应该使用并行流而不是传统循环？
- Nim 代码解析器
- 对于 Java 中的大数据，什么时候应该使用并行流而不是传统循环？
- 在 Visual Studio Code 中调试 powershell 脚本时出现问题
- Node js 应用程序中的 TikTok Api 问题
- 在 Laravel Blade 中检查变量是否具有来自外部 js 文件的特定值
© www.soinside.com 2019 - 2024. All rights reserved.