个人中心
gpt4 book ai didi

内容超出容器的 CSS Grid 问题

转载 作者：太空宇宙 更新时间：2023-11-04 00:56:51 25 4
gpt4 key购买 nike

我正在尝试按照此处的指南使用 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 是我的左侧导航，例如Profile、Support 等。main 显然是主要内容区。

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

当我使用 Chrome 的开发工具并将大小时调整为移动 View 时，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>

最佳答案

您应该避免将显示网格直接应用于正文元素，以避免在网格内考虑不需要的元素。然后，您可以使用 60px auto auto 简化 grid-template-rows 并在移动 View 上去掉 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>

关于内容超出容器的 CSS Grid 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54495564/

25 4 0
文章推荐： javascript - JavaScript 中的动画问题
文章推荐： python - BeautifulSoup 找不到元素
文章推荐： python - RESTful api 设计 : handle exceptions through nested functions (python, flask)
文章推荐： c - 尝试通过数组打印用户输入时出现意外输出
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com