CSS网格布局问题 - 内容重叠模板区域答案

【问题标题】：CSS grid layout issue - content overlapping template areaCSS网格布局问题 - 内容重叠模板区域
【发布时间】：2020-09-16 11:56:25
【问题描述】：

我刚刚开始学习 CSS 网格，而不是使用 bootstrap 等，

我已经为页眉、导航、主目录、旁边、页脚创建了行和列。

但是当我在标题内创建<div> 时，它与边界重叠，我不知道为什么。行高应该随着内容而增加...这就是我使用minmax(150px,auto)

的原因

html 是：

<nav>Nav</nav>
<header><div class="header-image"></div></header>
<main>Main</main>

CSS 是：

.container {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas: 
  "header"
  "nav"
  "main"
  "aside"
  "footer";
}

.header-image {
    background-size: cover;
    background-image: url('img/header-img.jpg');
    height: 200px;
}

我是否遗漏了一些明显的东西？任何帮助表示赞赏！

非常感谢！

编辑-

完整的 WordPress HTML 结构是：


<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial theme</title>
        
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/grid.css'; ?>">
        <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div class="container">
<header>
        <div class="header-image">
            <h1>Hello world!</h1>
        </div>
    </header>
    <main>

        <div class="order-div">
            <h2>Lorem ipsum dolor sit amet, consectetur</h2>
            <button>Order now!</button>
        </div>
    </main>
<footer>Footer</footer>
        </div>
    </body>
</html>

这是 grid.css

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 10px;
  grid-template-areas: 
  "header"
  "nav"
  "main"
  "footer";
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}


main {
    grid-area: main;
}

footer {
    grid-area: footer;
}

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px minmax(150px, auto) 100px;
        grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

@media (min-width: 992px) {
    .container {
        grid-template-areas:
            "header header header"
            "main main main"
            "footer footer footer";
    }
}

这是 style.css

* {
    box-sizing: border-box;
}

body {
    font-size: 1.4em;
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.container > * {
    color: #fff;
    text-shadow: 0 2px 0 rgba(110,133,156,0.12);
    /*padding: 0.85em;*/
    border: solid 1px rgba(110,133,156,0.15);
}

header {
    background-color: #3f8abf;
}

.header-image {
    display: flex;
    justify-content: center;
    background-size: cover;
    background-image: url('img/header-img.jpg');
    height: 200px;
}

nav {
    background-color: #fbaea8;
}

main {
    background-color: #aad2ed;  
}

aside {
    background-color: #6ad78a; 
}

footer {
    background-color: #6e859c;
}

.order-div {
    min-height: 400px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.order-div button {
    width: 100px;
    height: 50px;
    border: 2px solid white;
}

我希望这只是我犯的一个愚蠢的错误，但主要问题似乎是标题中的背景图片 - 我将其设置为 background-size:cover 以做出响应！

再次感谢！

【问题讨论】：

无法复制jsfiddle.net/5qgefu0n
请添加完整的 html 结构......
谢谢你们！我已经编辑了我的帖子以包含所有内容！希望这是一个愚蠢的错误！

标签： html css css-grid

【解决方案1】：

问题是您自己设置了grid 的高度。这会导致所有行（网格项）的高度相同（根据grid 规范）。然后将其中一个行的高度强制为自定义值200px。这会扰乱布局，因为这些新的 CSS 模块并没有那么智能来计算所有内容。去掉网格的100vh高度，让它根据内容自行调整。

【讨论】：

不，他设置网格行 minmax 所以最小值是 150 然后最大值是自动的，所以它应该根据里面的内容进行调整，高度至少为 150px。然后他有一个 200px 的 div，所以该行应该相应地调整。然后发生的事情是，在它下面是一个媒体查询，所以任何 768 像素及以上的东西，然后他将行高设置为 100 像素，因此里面的 div 然后溢出了行。
是的，我确实看了一段时间。我要说的问题是网格不应该大于 100vh。这实际上限制了最小值。我尝试了没有媒体查询的代码，因此问题不是源于媒体查询。附言当我开始工作时，他没有提供所有代码。

【解决方案2】：

我认为您的问题在于您的媒体查询，因为它覆盖了您在上面设置的 CSS。

@media (min-width: 768px) {
    .container {
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows: 100, minmax(150px, auto) 100;
         grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

如果您编辑“grid-template-rows”部分以匹配您的其他容器 minmax(150,auto)，如下面的代码似乎可以修复内容溢出。

@media (min-width: 768px) {
    .container {
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows:minmax(150px, auto);
         grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer";
    }
}

【讨论】：