CSS 网格：使网格行填满屏幕，将下一行推到屏幕外

问题描述 投票：0回答：1

有没有办法通过纯 HTML/CSS 来做到这一点？这就是我想要实现的目标：

|---------------------------| <-- start of screen
|          header           |   fixed height
|---------------------------|
|                           |
|                           |
|          content          |   fill screen
|                           |
|                           |
|---------------------------| <-- end of screen
|          footer           |   auto
|---------------------------|

一些我见过但没有回答我的问题的东西：

CSS 网格让项目占据剩余的可用屏幕空间

如何制作具有固定页眉和页脚且其余部分位于中间的 CSS 网格

如何让CSS网格项占用剩余空间？

Here's what I have so far (image)

body {
    width: 100%;
    min-height: 100%;
    margin: 0 0 0 0;
    background-color: gray;
}

.app-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "contnt contnt contnt contnt"
        "footer footer footer footer"
    ;

    height: 100vh;
    width: 100%;
}

.header {
    grid-area: header;
    background-color: lightcoral;
}

.content {
    grid-area: contnt;
    background-color: aqua;
}

.footer {
    grid-area: footer;
    background-color: lightyellow;
}
<body>
    <div class="app-wrapper">
        <div class="header">
            header
        </div>
        <div class="content">
            content
        </div>
        <div class="footer">
            footer
        </div>
    </div>
</body>

html css css-grid
1个回答
0
投票

解决方案：将

header
和
content
包裹起来，然后使其具有100vh。

html, body {
    width: 100%;
    min-height: 100%;
    margin: 0 0 0 0;
    background-color: gray;
}

.facade-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "contnt contnt contnt contnt"
    ;

    height: 100vh;
    width: 100%;
}

.header {
    grid-area: header;
    background-color: lightcoral;
}

.content {
    grid-area: contnt;
    background-color: aqua;
}

.footer {
    grid-area: footer;
    background-color: lightyellow;
}
<body>
    <div class="app-wrapper">
        <div class="facade-wrapper">
            <div class="header">
                header
            </div>
            <div class="content">
                content
            </div>
        </div>
        <div class="footer">
            footer
        </div>
    </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.