如何正确使用 css grid 进行页面布局？

debugcn 发表于 Dev

简单的

下面是我尝试使用网格进行页面布局的尝试。但是，滚动条位于标题下方。

而不是占据页面的整个高度。

发生这种情况是因为我添加overflow:auto了部分标签。由于我对使用网格布局不够熟悉，我不确定如何使用网格正确实现页面布局。有没有解决的办法？有没有更好的解决方案来实现我想要做的事情？

body {
            font-size: 24px;
            height: 100vh;
            margin: 0;
            display: grid;
            grid-template-columns: minmax(150px, 200px) auto;
            grid-template-rows:  54px auto;
            grid-template-areas: "header header"
                                "nav    section";
        }

        header {
            grid-area: header;
            background: red;
        }

        nav {
            display:flex;
            flex-direction: column;
            justify-content: space-between;
            grid-area: nav;
            background: blue;
        }
        section {
            grid-area: section;
            background: yellow;
            overflow:auto;
        }

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
<body>
    <header>
        header
    </header>
    <nav>
        <div>
            navigation
            <br> I'm at the top
        </div>
        <div>
            I'm at the bottom
        </div>
    </nav>
    <section>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
        section
        <br>
    </section>
</body>

</html>

侯赛因代码

首先，滚动条在标题下，因为

body{
   height:100vh;
 }

放

body{
 min-height:100vh;
}

现在，如果您设置 bodymin-height:100vh这将使整个身体滚动而不是 section.This 会将 nav 拉伸到与 section 相同的高度because second row height in grid is auto。

有没有解决的办法？有没有更好的解决方案来实现我想要做的事情？

我认为您不应该将 css grid 用于这种类型的布局，因为section在大多数情况下高度会有所不同，这也会使导航高度发生变化。在您的示例中，您必须滚动到部分底部才能单击或访问导航栏（或侧边栏）中的最后一个元素，当部分高度超过100vh.

我建议将导航栏position:fixed放在左侧，并使用 css grid 将元素定位在剩余的右侧。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-23

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何正确使用 css grid 进行页面布局？

如何正确使用 css grid 进行页面布局？

如何使用CSS Grid实现此布局？

CSS：如何进行正确的布局？

如何使用HTML / CSS使页面布局居中？

使用Flexbox CSS进行布局

如何使用 CSS FlexBox 创建这个复杂的页面布局

CSS：如何进行这种布局？

使用移动CSS布局在页面滚动上添加CSS规则

CSS Grid 两列键：值布局

如何使用 Grid 组件的 CSS API

如何使用CSS进行这种自适应布局？

如何使用css3'flexbox'进行这样的布局？

如何使用带有 angular 的隔离 css 的 flexbox 进行布局

使用Grid Css折叠边框？

为什么我的HTML结构不能与CSS Grid布局一起使用？

页面布局，CSS

使用CSS Transitions进行页面加载

使用HTML和CSS的基本印刷页面布局

使用div和CSS的3列页面布局

无法使用CSS网格/网格模板区域来布局页面

如何使用CSS创建页面标题（图像）以进行打印

如何在ui-grid中实现反映页面内容更改的动态CSS类？

使用过的表格进行布局，需要转换为CSS吗？

如何使用小胡子模板正确布局bootstrap3 CSS网格？

ag-Grid 如何给元素添加css

使用CSS Grid调整图像大小

在 JavaScript 中使用 CSS Grid repeat() 声明

移动版CSS Grid单列布局，无需媒体查询

如何使用CSS Grid重新排序React组件？

使用CSS Grid时如何使内容居中并使背景覆盖整列？