Question

我正在尝试使用CSS Grid垂直固定侧边栏，并通过添加“ overflow：hidden;”使它正常工作。在我的网格容器上，但是每当我在标题下放置任何其他内容时，除非我删除了网格容器上的“溢出：隐藏”，否则我看不到该内容，但是然后边栏并没有垂直固定在上下方向的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>

Answer 1

修复边栏。只需将以下内容添加到.sidebar：

position: fixed;
width: 20%;

Answer 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>

如何使用CSS Grid垂直固定此侧边栏？

2 个答案: