时间戳

首页 > 解决方案 > 内容超出容器的 CSS Grid 问题

css - 内容超出容器的 CSS Grid 问题

问题描述

我正在尝试在此处遵循使用 CSS Grid 的指南：Tutorial。我不想做同样的事情。

我有两个定义的区域：aside和main.

这是我的网格定义：

body {
    display: grid;
    grid-template-rows: 100px 1fr;
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "aside main"
      "aside main";
  }

aside是我的左侧导航如Profile、Support等main，显然是主要的内容区域。

当我在笔记本电脑的 Chrome 中查看页面时，旁边的容器/网格区域占据了 100% 的页面，没问题。

当我使用 Chrome 的开发工具并重新调整到移动视图的大小时，aside网格区域停止在整个页面之外，它只显示一个或两个菜单项。显示其他项目，如果我在页面上选择所有项目，我可以看到它们，它们就在aside容器之外。

似乎我需要为内容指定更多行以适应？但这听起来不对，因为我怎么知道不同数量的内容需要多少行？

我尝试使用grid-auto-columns: auto;，但没有帮助。

注意：虽然我在开始这样做之前遇到了问题，但我正在搞乱媒体查询，所以我认为它不相关。

任何帮助将不胜感激。

编辑

桌面图像

手机图片

这是我的完整 CSS 和 HTML：

html, body {
  height: 100% !important;
}

body {
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: 60px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "nav"
    "main";
}

nav {
  grid-area: nav;
  background-color: pink;
}

aside {
  grid-area: aside;
  display: none;
  background-color: rgb(10, 116, 187);
  color: white;
  border-right: 5px solid rgb(2, 106, 175);
}

main {
  grid-area: main;
  color: #4C4C4C;
  background-color: rgb(248, 248, 248);
}


/******************************************
 MEDIA QUERIES
******************************************/

/* 600px screen width OR larger */
@media only screen and (min-width: 600px) {

  body {
    display: grid;
    grid-template-rows: 100px 1fr;
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "aside main"
      "aside main";
  }

  aside {
    display: inline;
  }

  nav {
    display: none;
  }

  .brandText {
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
  }

  .smallProfileImageDiv {
    height: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .smallProfileImageDiv img {
    width: 100px;
    height: 100px;
  }

  .imgCircle {
    border-radius: 50%;
  }

  .profileNameBox {
    text-align: center;
    margin-bottom: 60px;
  }

  .profileName {
    font-size: 16px;
  }

  .positionTitle {
    margin-top: 5px;
  }

  .leftNavOptions {
    margin-left: 25px;
  }

  .leftNavItemOption {
    margin-bottom: 20px;
    padding: 5px;
  }

  .leftNavItemOption:hover {
    margin-bottom: 20px;
    padding: 5px;
    background-color: orange;
  }

  .leftNavOptionIcon {
    min-width: 20px;
    font-size: 18px;
  }

  .leftNavOption {
    margin-left: 15px;
  }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CarePower.io</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
  <meta name="author" content="CarePower.io" />

  <!-- Favicons -->
  <link href="" rel="icon">
  <link href="" rel="apple-touch-icon">

  <!-- Bootstrap CSS File -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

  <!-- Main Stylesheet File -->
  <link href="css/main.css" rel="stylesheet">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>

<nav>
    Hi
</nav>

<aside>

    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12 brandText">
                CarePower.io
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="smallProfileImageDiv">
                    <img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="profileNameBox">
                    <span class="profileName">John Doe</span>
                    <div class="positionTitle">
                        <span class="badge badge-primary">CEO</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="leftNavItemOption">
                    <i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="leftNavItemOption">
                    <i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="leftNavItemOption">
                    <i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="leftNavItemOption">
                    <i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="leftNavItemOption">
                    <i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
                </div>
            </div>
        </div>

    </div>

</aside>

<main>Main</main>

<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Template Main Javascript File -->
<script src="js/main.js"></script>

</body>
</html>

标签： csscss-grid

解决方案

您应该避免将显示网格直接应用于 body 元素，以避免在网格内考虑不需要的元素。然后您可以简化grid-template-rows使用60px auto auto并摆脱grid-area移动视图。您还可以考虑使用min-height:100vh全高页面并允许内容在小型设备上增长。

div.body {
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

nav {
  background-color: pink;
}

aside {
  display: none;
  background-color: rgb(10, 116, 187);
  color: white;
  border-right: 5px solid rgb(2, 106, 175);
}

main {
  color: #4C4C4C;
  background-color: rgb(248, 248, 248);
}


/******************************************
 MEDIA QUERIES
******************************************/


/* 600px screen width OR larger */

@media only screen and (min-width: 600px) {
  div.body {
    display: grid;
    grid-template-rows: 100px 1fr;
    grid-template-columns: 250px 1fr;
    grid-template-areas: "aside main" "aside main";
  }
  aside {
    grid-area: aside;
  }
  main {
    grid-area: main;
  }
  nav {
    display: none!important;
  }
  .brandText {
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
  }
  .smallProfileImageDiv {
    height: 100px;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .smallProfileImageDiv img {
    width: 100px;
    height: 100px;
  }
  .imgCircle {
    border-radius: 50%;
  }
  .profileNameBox {
    text-align: center;
    margin-bottom: 60px;
  }
  .profileName {
    font-size: 16px;
  }
  .positionTitle {
    margin-top: 5px;
  }
  .leftNavOptions {
    margin-left: 25px;
  }
  .leftNavItemOption {
    margin-bottom: 20px;
    padding: 5px;
  }
  .leftNavItemOption:hover {
    margin-bottom: 20px;
    padding: 5px;
    background-color: orange;
  }
  .leftNavOptionIcon {
    min-width: 20px;
    font-size: 18px;
  }
  .leftNavOption {
    margin-left: 15px;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<div class="body">
  <nav>
    Hi
  </nav>

  <aside>

    <div class="container-fluid">

      <div class="row">
        <div class="col-lg-12 brandText">
          CarePower.io
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="smallProfileImageDiv">
            <img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="profileNameBox">
            <span class="profileName">John Doe</span>
            <div class="positionTitle">
              <span class="badge badge-primary">CEO</span>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="leftNavItemOption">
            <i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="leftNavItemOption">
            <i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="leftNavItemOption">
            <i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="leftNavItemOption">
            <i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <div class="leftNavItemOption">
            <i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
          </div>
        </div>
      </div>

    </div>

  </aside>

  <main>Main</main>

</div>

<!-- JavaScript Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读