英文:
How to make a empty grid-template-row to fill up remaining space?
问题
如何创建一个具有3行的网格布局，以便这些行填充整个屏幕，即使行是空的？
例如，页眉和页脚各自有100px和50px。中间的网格行（主区域）应填充剩余的屏幕。
<!-- 开始代码段 -->
<!-- CSS部分 -->
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px auto 50px;
}
header {
grid-column: 1/2;
grid-row: 1/2;
background-color: bisque;
}
main {
grid-column: 1/2;
grid-row: 2/3;
background-color: chocolate;
}
footer {
grid-column: 1/2;
grid-row: 3/4;
background-color: darkolivegreen;
}
<!-- HTML部分 -->
<body class="grid">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</body>
<!-- 结束代码段 -->
希望这对你有所帮助。
英文:
How can I create a grid layout with 3 rows so that the rows fill the entire screen, even if the rows are empty?
For example, header and footer have 100px and 50px. The middle grid row (main area) should fill the remaining screen.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px auto 50px;
}
header {
grid-column: 1/2;
grid-row: 1/2;
background-color: bisque;
}
main {
grid-column: 1/2;
grid-row: 2/3;
background-color: chocolate;
}
footer {
grid-column: 1/2;
grid-row: 3/4;
background-color: darkolivegreen;
}
<!-- language: lang-html -->
<body class="grid">
<header>
Header
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</body>
<!-- end snippet -->
I've read similar questions here but haven't found anything suitable (I'm also still a beginner in web design).
答案1
得分: 3
I think you are missing the height: 100vh which can fills the entire viewport height.
Try below:
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
height: 100vh; /* 填充整个视口高度 */
}
英文:
I think you are missing the height: 100vh which can fills the entire viewport height.
Try below:
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
height: 100vh; /* Fills the entire viewport height */
}
答案2
得分: 2
-
答案有2种，更好和不太好：
- 确定
parentdiv 的高度并使用1fr
.grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 100px 1fr 50px; min-height: 100vh; }- 移除
grid-template-rows并单独确定子元素的高度
.grid { display: grid; grid-template-columns: 1fr; } header { background-color: bisque; height: 100px; } main { background-color: chocolate; height: calc(100vh - 250px); } footer { background-color: darkolivegreen; height: 150px; }如我提到的，第一种解决方案更加精致，可以这么说...
- 确定
英文:
There are 2 solutions, better and worse:
- Determine
parentdiv height and use1fr
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1fr 50px;
min-height: 100vh;
}
- Remove
grid-template-rowsand determine childrens` heights seperately
.grid {
display: grid;
grid-template-columns: 1fr;
}
header {
background-color: bisque;
height: 100px;
}
main {
background-color: chocolate;
height: calc(100vh - 250px);
}
footer {
background-color: darkolivegreen;
height: 150px;
}
as I mentioned, 1st solution is much more sophisticated so to say...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论