Как я могу сделать эту боковую панель фиксированной по вертикали с помощью CSS Grid? - PullRequest
Новая
       20

Как я могу сделать эту боковую панель фиксированной по вертикали с помощью CSS Grid?

0 голосов
/ 21 декабря 2018

Я пытаюсь настроить боковую панель по вертикали, используя CSS Grid, и у меня все получилось, добавив "overflow: hidden;"в моем Grid-контейнере, но всякий раз, когда я помещаю какой-либо другой контент в свой заголовок, я не вижу его, пока я не уберу «overflow: hidden» в моем Grid-контейнере, но тогда моя боковая панель не будет зафиксирована вертикально на 100% вверх и вниз,Что я делаю не так? 

    
    
    
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        }
    
    
        body {
        font-family: 'Lato', sans-serif;
        }
    
        .grid-container {
        height: 100vh;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        overflow: hidden;
    
        }
    
    
        /* Sidebar */
    
        .sidebar {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        padding-left: 2rem;
        padding-top: 2rem;
        background: #CC2936;
        height: 100vh;
        grid-row: 1 / 1;
        }
    
        .logo {
        text-align: center;
        color: #EEE5E9;
        font-size: 1.5rem;
        }
    
    
       .sidebar a {
        text-decoration: none;
        color: #EEE5E9;
        margin-top: 3rem;
        }
    
       .sidebar i {
        margin-right: .8rem;
        }
    
    
       /* Header Section */
    
    
        .header {
        grid-column: 2 / 6;
        padding-top: 1rem;
    
        }
    
        .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        }
    
        .search {
         width: 80%;
        padding-left: .8rem;
        }
    
        .search input {
          width: 80%;
          height: 2.2rem;
        }
    
        .search i {
          padding-right: .5rem;
        }
    
        .links {
          padding-right: 1.2rem;
        }
    
    
        .content {
          grid-column: 2 / 5;
          grid-row: 2 / 2;
        }


    
      <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Dashboard</title>
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">
        </head>
        <body>
    
      <div class="grid-container">
          <header class="header">
                    <div class="flex">
                        <div class="search">
                                <i class="fas fa-search"></i><input type="text" name="text" placeholder="search">
                        </div>
                
                        <div class="links">
                                <span class="plus"><i class="fas fa-plus"></i></span>
                                <i class="far fa-bell">Notifications</i>
                                <span class="caret"><i class="fas fa-caret-down"></i></span>
                        </div>
                    </div>
          </header>
    
          <nav class="sidebar">
                <h3 class="logo">Red Stone Jobs</h3>
                <a href="#"><i class="fas fa-home"></i>Home</a>
                <a href="#"><i class="fas fa-file"></i>Applications</a>
                <a href="#"><i class="far fa-calendar-alt"></i>Interview Schedule</a>
                <a href="#"><i class="fas fa-user"></i>Profile</a>
                <a href="#"><i class="fas fa-cog"></i>Settings</a>
          </nav>
    
          <section class="content">
              <h1>Dashboard</h1>
              <p>Welcome to Red Stone Jobs</p>
          </section>
    
         
      </div>
    
    
    
    
    
                
    
       
    
    
        
        </body>
        </html>

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

Сделайте, чтобы ваша сетка состояла из 2 строк.

Установите боковую панель, чтобы охватить 2 строки.

Установите содержимое для второй строки: 

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

body {
  font-family: 'Lato', sans-serif;
}

.grid-container {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr auto;
}


/* Sidebar */

.sidebar {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding-left: 2rem;
  padding-top: 2rem;
  background: #CC2936;
  height: 100vh;
  grid-row: 1 / 3;
}

.logo {
  text-align: center;
  color: #EEE5E9;
  font-size: 1.5rem;
}

.sidebar a {
  text-decoration: none;
  color: #EEE5E9;
  margin-top: 3rem;
}

.sidebar i {
  margin-right: .8rem;
}


/* Header Section */

.header {
  grid-column: 2 / 6;
  padding-top: 1rem;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search {
  width: 80%;
  padding-left: .8rem;
}

.search input {
  width: 80%;
  height: 2.2rem;
}

.search i {
  padding-right: .5rem;
}

.links {
  padding-right: 1.2rem;
}

.content {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dashboard</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div class="grid-container">
    <header class="header">
      <div class="flex">
        <div class="search">
          <i class="fas fa-search"></i><input type="text" name="text" placeholder="search">
        </div>

        <div class="links">
          <span class="plus"><i class="fas fa-plus"></i></span>
          <i class="far fa-bell">Notifications</i>
          <span class="caret"><i class="fas fa-caret-down"></i></span>
        </div>
      </div>
    </header>

    <nav class="sidebar">
      <h3 class="logo">Red Stone Jobs</h3>
      <a href="#"><i class="fas fa-home"></i>Home</a>
      <a href="#"><i class="fas fa-file"></i>Applications</a>
      <a href="#"><i class="far fa-calendar-alt"></i>Interview Schedule</a>
      <a href="#"><i class="fas fa-user"></i>Profile</a>
      <a href="#"><i class="fas fa-cog"></i>Settings</a>
    </nav>

    <section class="content">
      <h1>Dashboard</h1>
      <p>Welcome to Red Stone Jobs</p>
    </section>


  </div>











</body>

</html>
0 голосов
/ 21 декабря 2018

Сделайте вашу боковую панель исправленной.Просто добавьте в .sidebar следующее: 

position: fixed;
width: 20%;
...