内容超出容器的CSS Grid问题

时间：2019-02-02 17:25:27

标签： css css-grid

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

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

这是我的网格定义：

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

aside是我的左侧导航，例如个人资料，支持等。main显然是主要的内容区域。

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

当我使用Chrome的开发工具并调整为移动视图的大小时，aside网格区域会停在整页之外，它仅显示一个或两个菜单项。显示其他项，如果我在页面上选择全部，则可以看到它们，它们就位于aside容器之外。

好像 我需要指定更多行以使内容适合？但这听起来不对，因为我怎么知道需要多少行才能显示不同数量的内容？

我尝试使用grid-auto-columns: auto;，但这无济于事。

注意：尽管我在开始这样做之前遇到了问题，但我还是在搞媒体查询，所以我认为这没有关系。

任何帮助将不胜感激。

修改

Desktop的图片

Mobile的图片

下面是我的全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>

1 个答案:

答案 0 :(得分：2)

您应该避免直接施加显示网格到主体元件，以避免具有网格内考虑不需要的元素。然后你就可以简化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>

相关问题
最新问题