CSS Grid - 网格模板未扩展全高

【问题标题】：CSS Grid - Grid template not expanding full heightCSS Grid - 网格模板未扩展全高
【发布时间】：2020-12-04 15:28:54
【问题描述】：

我正在使用 CSS-Grid 并且我在主要部分中添加了一些示例内容，我不知道为什么主要 o 侧边栏部分中的内容没有扩展完整高度。正如您在代码 sn-p 中看到的那样。 我已经使用heigth: 100vh 或100% 定义了正文、html 和容器。

任何建议将不胜感激。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100vh;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100vh;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

【问题讨论】：

  • 溢出：自动；主要？

标签： css css-grid


【解决方案1】：

如果您只想要完全响应的列，您的代码可以这样简化：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.container * {
  padding: 10px;
}

nav {
  height: 5rem;
  grid-column-start: 1;
  grid-column-end: 4;
  background: green;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  background: gold;
}

main {
  grid-column-start: 2;
  grid-column-end: 4;
  background: skyblue;
}
<div class="container">
  <nav>navigation bar</nav>
  <div class="sidebar">sidebar</div>
  <main>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
    <h2>Title</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
  </main>
</div>

【讨论】：

    【解决方案2】：

    您还可以将height:100vh 转换为min-height:100vh 转换为.container 并从.sidebar 和main 以及最终从html 和body 中删除height，因为.container 将填充屏幕本身

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

   

.container {
    min-height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

    【讨论】：

      【解决方案3】：

      您需要编辑两个类。

      带有height: 100%的主边栏和侧边栏

      别忘了清除缓存。

      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template: "header header header" 5rem 
                   "sidebar main main" auto / 8rem auto;
  }
  
  nav {
    grid-area: header;
    grid-column-end: span 3;
    background: green;
  }

  .sidebar {
    height: 100%;
    grid-area: sidebar;
    background: gold;
  }
  
  main {
    height: 100%;
    grid-area: main;
    grid-column-end: span 2;
    background: skyblue;
  }
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav>navigation bar</nav>
        <div class="sidebar">sidebar</div>
        <main>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
            <h2>Title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias a facilis saepe id beatae repellendus excepturi sapiente, dignissimos atque totam deleniti laboriosam architecto accusantium facere odio placeat vel quidem asperiores!</p>
        </main>
    </div>
</body>
</html>

      希望这会有用。

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2018-12-15
        • 2018-04-12
        • 2017-04-24
        • 2012-01-10
        • 1970-01-01
        • 1970-01-01
        • 2019-01-27
        • 2020-09-30
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode