我想创建固定的侧边栏，但滚动不起作用

编程问答 2022-08-12

问题描述

我使用的是网格布局，如果我将位置设置为固定，则滚动条无法在侧边栏上使用，它会更改布局，并且在屏幕缩小时无法正常工作。但是，如果我未将位置设置为固定，则侧边栏不会固定。我试图更改页边距填充和其他位置来修复它，但是没有运气 我怎么解决这个问题。 在此先感谢

.wrapper{
  display:grid;
  grid-template-areas:
  "nav"
  "main";
  width:100%;
}
.navbar{
  grid-area:nav;
  height:100%;
  Box-shadow: 2px 2px 10px white;
  margin:0;
  padding:0;
  top:0;
  overflow-y:auto;
 }
.navbar ul{
  list-style-type:none;
  font-size:1.2em;
  display:flex;
  flex-direction:column; 
  padding:0;
  margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
<div class="wrapper">
    <nav class="navbar">
      <header id="head">Learn <span style="color:green">HTML</span</header>
      <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
           <li><a href="#html_links" class="nav-link">HTML Links</a></li>
           <li><a href="#" class="nav-link">HTML Images</a></li>
        </ul>
    </nav>
    
    <main class="main-doc"></main>
</div>

如果我将位置设置为固定，请查看代码，它显示不必要的间距 https://codepen.io/Navbham/pen/OJNOqJv

解决方法

.wrapper {
  display: grid;
  grid-template-areas: "nav" "main";
  width: 100%;
}

.navbar {
  width: 50%;
  position: fixed;
  grid-area: nav;
  height: 100%;
  box-shadow: 2px 2px 10px white;
  margin: 0;
  padding: 0;
  top: 0;
}

.navbar ul {
  list-style-type: none;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.navbar li {
  display: flex;
}

.nav-link {
  text-decoration: none;
  color: black;
  display: flex;
  flex: 1;
  padding: 5px 0px 5px 10px;
  font-size: 1.2rem;
}

.main-doc {
  height: 200vh;
}
<div class="wrapper">
  <nav class="navbar">
    <header id="head">Learn <span style="color:green">HTML</span></header>
    <hr>
    <ul>
      <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
      <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
      <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
      <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
      <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
      <li><a href="#html
_links" class="nav-link">HTML Links</a></li>
      <li><a href="#" class="nav-link">HTML Images</a></li>

    </ul>
  </nav>
  <main class="main-doc">
  </main>
</div>

,

我认为（height：100％;）中的问题，用（min-height：100％;）代替，或将其设置为以像素为单位的值（height：100px;）。

,

将position: fixed添加到navbar并添加更多元素以查看效果。

.wrapper{
    display:grid;
    grid-template-areas:
    "nav"
    "main";
    width:100%;
}
.navbar{
    grid-area:nav;
    height:100%;
    box-shadow: 2px 2px 10px white;
    margin:0;
    padding:0;
    top:0;
    overflow-y:auto;
    position: fixed; // Added this
 }
.navbar ul{
list-style-type:none;
font-size:1.2em;
display:flex;
flex-direction:column; 
padding:0;
margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
<div class="wrapper">
  <nav class="navbar">
    <header id="head">Learn <span style="color:green">HTML</span></header>
    <hr>
    <ul>
      <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
  <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
  <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
  <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
  <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
  <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li> <li><a
      href="#html_para" class="nav-link">HTML Paragraphs</a></li>
  <li><a href="#html
      _links" class="nav-link">HTML Links</a></li>
  <li><a href="#" class="nav-link">HTML Images</a></li>

    </ul>
  </nav>
  <main class="main-doc">
  </main>
</div>

,

中没有内容，这就是为什么它不随页面滚动。

我为 .main-doc 提供了最小高度，因此它开始滚动。

如果您有足够的内容，则不必提供任何最小高度。

 .wrapper{
        display:grid;
        grid-template-areas:
        "nav"
        "main";
        width:100%;
    }
    .navbar{
    overflow-y: auto;
position: fixed;
z-index: 1;
padding: 20px;
height: auto;
bottom: 0;
top: 0;
box-shadow: 2px 0px 5px 0px #959595;
margin: 0;
grid-area: nav;
     }
.navbar ul{
    list-style-type:none;
    font-size:1.2em;
    display:flex;
    flex-direction:column; 
    padding:0;
    margin:0;
}
.navbar li{
  display:flex;
}
.nav-link{
  text-decoration:none;
  color:black;
  display:flex;
  flex:1;
  padding:5px 0px 5px 10px;
  font-size:1.2rem;
}
.main-doc{
    min-height:1000px;
}
<div class="wrapper">
    <nav class="navbar">
      <header id="head">Learn <span style="color:green">HTML</span></header>
      <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
                       <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
           <li><a href="#html
_links" class="nav-link">HTML Links</a></li>
           <li><a href="#" class="nav-link">HTML Images</a></li>
                    <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
           <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
           <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
           <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
        </ul>
    </nav>
    <main class="main-doc">
</main>
</div>

,

您没有固定位置。希望对您有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        .wrapper{
            display:grid;
            grid-template-areas:
                    "nav"
                    "main";
            width:100%;
        }
        .navbar{
            grid-area:nav;
            height:100%;
            box-shadow: 2px 2px 10px white;
            margin:0;
            padding:0;
            top:0;
            overflow-y:auto;
            background-color: #00d6d6;
            width: 220px;
            position: fixed;
        }
        .navbar ul{
            list-style-type:none;
            font-size:1.3em;
            display:flex;
            flex-direction:column;
            padding:0;
            margin:0;
            align-content: flex-start;
            align-items: flex-start;
            justify-items: flex-start;
            justify-content: flex-start;
        }
        .navbar li{
            display:flex;
        }
        .nav-link{
            text-decoration:none;
            color:black;
            display:flex;
            flex:1;
            padding:5px 0px 5px 10px;
            font-size:1.2rem;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <nav class="navbar">
        <header id="head">Learn <span style="color:green">HTML</span</header>
        <hr>
        <ul>
            <li><a href="#html_intro" class="nav-link">HTML Introduction</a></li>
            <li><a href="#html_editor" class="nav-link">HTML Editors</a></li>
            <li><a href="#html_basics" class="nav-link">HTML Basics</a></li>
            <li><a href="#html_head" class="nav-link">HTML Headings</a></li>
            <li><a href="#html_para" class="nav-link">HTML Paragraphs</a></li>
            <li><a href="#html_links" class="nav-link">HTML Links</a></li>
            <li><a href="#" class="nav-link">HTML Images</a></li>
        </ul>
    </nav>

    <main class="main-doc">

    </main>
</div>

</body>
</html>
fixedhtml