Проблемы CSS Grid с содержимым, выходящим за пределы контейнера - PullRequest
Новая
       5

Проблемы CSS Grid с содержимым, выходящим за пределы контейнера

0 голосов
/ 02 февраля 2019

Я пытаюсь следовать руководству по использованию 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 - это моя левая навигация, такая как Профиль , Поддержка и т. Д. main, очевидно, является основной областью содержимого.

Когда я просматриваюстраница в Chrome на моем ноутбуке, область контейнера / сетки занимает 100% страницы, без проблем.

Когда я использую инструменты разработчика Chrome и изменяю размер в мобильном представлении, сетка asideобласть останавливается до полной страницы, она отображает только один или два пункта меню.Другие элементы отображаются , их можно увидеть, если я выделю все на странице, они находятся за пределами контейнера aside.

Это выглядит как Iнужно указать больше строк для содержимого, чтобы соответствовать?Но это звучит неправильно, потому что как я узнаю, сколько строк мне нужно для разного объема контента?

Я пытался использовать 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>

1 Ответ

0 голосов
/ 02 февраля 2019

Следует избегать применения сетки отображения непосредственно к элементу тела, чтобы избежать попадания нежелательного элемента в сетку.Тогда вы можете упростить 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...