当我滚动我的网页时，我的侧边栏也包括在内。

Question

你好，我希望我的网页有一个“锁定”的侧边栏，但是每当我向下滚动我的侧边栏时，有什么方法可以让我的侧边栏“不”包括在我向下滚动的时候？

这是我的代码片段

​

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url("https://use.typekit.net/imp2prc.css");
*{
  box-sizing: border-box;
}
body{
  margin:0;
  min-height: 100vh;
  display: flex;
}
.content{
  background-color: #EFEFEF;
  flex-grow: 1;
  min-height: 100vh;
}
.banner{
  background-image: url("banner.png");
  position: relative;
  min-width: 100%;
  background-position: center;
  background-size: cover;
  height: 7rem;
  box-shadow: inset 0 -20px 50px  black;
  display: flex;
}
.container-content{
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  flex-grow: 1;
}
h3{
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  text-align: center;
  color: white;
  margin-top: 0;
}
h3:hover{
  transition: 0.1s;
  background-color: #9e9b9b;
  color: #1c1c1c;
  height: 60px;
  margin-top: -17px;
  padding-top: 17px;
}
.sidebar{
  min-height: 100%;
  position: sticky;
  overflow: auto;
  bottom: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  min-width: 245px;
  background-color: #262626;
  padding-top: 20px;
}
.sidebarlogo{
  max-width: 245px;
}
.header{
  height: 60px;
  background-color: #5c5b5b;
  padding-top: 17px;
}
.menu a{
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  padding: 15px 6px 15px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  margin: 0;
}
.menu a:hover {
  transition: 0.5s;
  Background-color: #1b1b1b;
  text-decoration: underline;
}
.fa-building-columns{
  padding-right: 12px;
  font-size: 39px;
}
.fa-books{
  padding-right: 12px;
  font-size: 39px;
}
.fa-users{
  padding-right: 12px;
  font-size: 32px;
}
.fa-megaphone{
  padding-right: 12px;
  font-size: 36px;
}
.fa-arrow-right-from-bracket{
  padding-right: 12px;
  font-size: 39px;
}
.mcm{
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    padding-top: 10px;
    background-color: white;
    width: 100%;
    height: 54rem;
    max-width: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: auto;
    display: block;
}
.image{
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    height: 330px;
    width: auto;
    margin: auto;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.image:hover{
    opacity: 80%;
    transition: 0.3s;
}
p.p{
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}
p.p1{
    margin-top: 20px;
    text-align: center;
    font-family: source-sans-pro, sans-serif;
    font-size: 22px;
    font-weight: 900;
    font-style: normal;
    color: #1a3473;
}
p.desc{
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  text-align: justify;
  margin-left: 180px;
  margin-right: 180px;
  margin-top: 24px;
}
p.desc2{
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  text-align: justify;
  margin-left: 180px;
  margin-right: 180px;
  margin-top: -5px;
}
ul.list{
  margin-left: 165px;
  margin-right: 180px;
  margin-top: -5px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
}
p.desc3{
  font-family: source-sans-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  text-align: justify;
  margin-left: 180px;
  margin-right: 180px;
  margin-top: -5px;
}
div.mcm1{
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  padding-top: 10px;
  background-color: white;
  width: 100%;
  height: 40rem;
  max-width: 100%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: auto;
  display: block;
}
p.pp{
  font-size: 28px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}
hr.line{
  margin-top: -20px;
  border-top: 2px solid red;
  width: 150px
}
a.x1{
  text-decoration: none;
  color:#DD251B;
}
p.pp1{
  margin-left: 70px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
div.x{
  margin-left: 70px;
  margin-top: 9px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list2{
  margin-left: 50px;
  margin-top: 8px;
  color:#090E35;
  font-size: 14px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list2 a{
  color: inherit;
  text-decoration: none;
}
div.x2{
  margin-left: 70px;
  margin-top: 9px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list3{
  margin-left: 50px;
  margin-top: 8px;
  color:#090E35;
  font-size: 14px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list3 a{
  color: inherit;
  text-decoration: none;
}
div.x3{
  margin-left: 500px;
  margin-top: -295px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list4{
  margin-left: 480px;
  margin-top: 8px;
  color:#090E35;
  font-size: 14px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list4 a{
  color: inherit;
  text-decoration: none;
}
div.x4{
  margin-left: 500px;
  margin-top: 0px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list5{
  margin-left: 480px;
  margin-top: 0px;
  color:#090E35;
  font-size: 14px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list5 a{
  color: inherit;
  text-decoration: none;
}
div.x6{
  margin-left: 70px;
  margin-top: -20px;
  color:#DD251B;
  font-size: 17px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list6{
  margin-left: 50px;
  margin-top: 8px;
  color:#090E35;
  font-size: 14px;
  font-family: source-sans-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
}
ul.list6 a{
  color: inherit;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x=icon" href="form.png">
    <link rel="stylesheet" href="IP.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
    <script src="ip.js"></script>
    <title>Institution Page</title>
</head>
<body>
    <aside class="sidebar">
      <span>
        <img class="sidebarlogo" src="sidebarlogo1.jpg">
        <div class="header">
            <h3>Welcome to the Institution Page!</h3>
        </div>
        <br>
        <div class="menu">
          <a href="IP.html" class="p"><i class="fa-regular fa-building-columns"></i>Institution Page</a>

          <a href="#"><i class="fa-light fa-books"></i>Courses</a>
          <a href="#"><i class="fa-light fa-users"></i>Student Roster</a>
          <a href="#"><i class="fa-regular fa-megaphone"></i>Announcements</a>

          <br><br><br><br><br><br>

          <a href="labtask 6.html"><i class="fa-light fa-arrow-right-from-bracket"></i>Log out</a>
        </div>
      </span>
      </aside>

      <main class="content">
          <div class="banner"></div>
          <div class="container-content">
                <div class="mcm" >
                    <p class="p">
                        World-Class Mapúa Education right here in Davao City!
                    </p>
                    <a href="https://mcm.edu.ph">
                    <img id="imagemcm" src="mcm1.jpg" class="image">
                    </a>
                    <p class="p1">
                        Malayan Colleges Mindanao, A Mapúa School
                    </p>
                    <p class="desc">
                        <strong style="color:#090E35">Malayan Colleges Mindanao (MCM)</strong>, a branch encompassing
                        Mapua University’s technological and academic excellence
                        in Mindanao, has occupied a 3-hectare land area along Gen.
                        Douglas MacArthur Highway, beside Matina Town Square in Matina, Davao City.
                    </p>
                    <p class="desc2">
                        <strong style="color:#090E35">MCM</strong> has built a community of competent and innovative leaders who possess
                        attributes that make them globally competitive and locally in-demand, 
                        distinguishing itself from the rest through these important facets in its educational system:
                        <ul class="list">
                            <li>Learner-Centered Outcomes-Based Education</li>
                            <li>Blended Online and Face-to-Face Learning Sessions</li>
                             <li>Industry Partnerships</li>
                             <li>Mindanao-Centric Learning</li>
                             <li>Advanced Learning Facilities </li>   
                        </ul>
                    </p>
                    <p class="desc3">
                        Within MCM’s DNA is the academic excellence that Mapúa is known for, and we are committed
                         to bringing about the same level of excellence into our community here in Mindanao.
                    </p>
                </div>
                
                <br>

                <div class="mcm1" >
                    <p class="pp">
                        WHAT <strong style="color:#DD251B">MCM</strong> OFFERS
                    </p>
                    <hr class="line">  
                    </hr>
                    <p class="pp1">
                        <a class="x1" href="https://mcm.edu.ph/junior-high-school-jhs/">
                        JUNIOR HIGH SCHOOL
                        </a>
                        <div class="x">
                        SENIOR HIGH SCHOOL
                        </div>
                        <ul class="list2">
                            <a href="https://mcm.edu.ph/programs/arts-and-design/"><li>Arts and Design Track (AD)</li></a>
                            <a href="https://mcm.edu.ph/programs/senior-high-school-shs/accountancy-business-and-management-abm/"><li>Accountancy, Business and Management (ABM)</li></a>
                            <a href="https://mcm.edu.ph/programs/senior-high-school-shs/humanities-and-social-sciences-humss/"><li>Humanities and Social Sciences (HUMSS)</li></a>
                            <a href="https://mcm.edu.ph/programs/senior-high-school-shs/science-technology-engineering-and-mathematics-stem/"><li>Science, Technology, Engineering and Mathematics (STEM)</li></a>
                            <a href="https://mcm.edu.ph/programs/senior-high-school-shs/information-and-communications-technology-ict/"><li>Information and Communications Technology (ICT)</li></a>
                        </ul>
                        <div class="x2">
                            COLLEGE OF BUSINESS
                        </div>
                        <ul class="list3">
                            <a href="https://mcm.edu.ph/programs/alfonso-t-yuchengco-college-of-business/accountancy/"><li>Accountancy (ACT)</li></a>
                            <a href="https://mcm.edu.ph/programs/alfonso-t-yuchengco-college-of-business/management-accounting/"><li>Management Accounting (MA)</li></a>
                            <a href="https://mcm.edu.ph/programs/alfonso-t-yuchengco-college-of-business/entrepreneurship/"><li>Entrepreneurship (ENT)</li></a>
                            <a href="https://mcm.edu.ph/programs/alfonso-t-yuchengco-college-of-business/tourism-management/"><li>Tourism Management (TM)</li></a>   
                        </ul>
                        <div class="x3">
                            COLLEGE OF ARTS AND SCIENCE
                        </div>
                        <ul class="list4">
                            <a href="https://mcm.edu.ph/programs/college-of-arts-and-science/bachelor-of-science-in-biology/"><li>Biology (BIO)</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-arts-and-sciences/bachelor-of-arts-in-communication/"><li>Communications (COMM)</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-arts-and-sciences/bachelor-of-multimedia-arts-bmma/"><li>Multimedia Arts (MMA)</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-arts-and-science/bachelor-of-science-in-psychology/"><li>Psychology (PSY)</li></a>
                        </ul>
                        <div class="x4">
                            COLLEGE OF ENGINEERING AND ARCHITECTURE
                        </div>
                        <ul class="list5">
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/architecture/"><li>Architecture</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/chemical-engineering/"><li>Chemical Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/civil-engineering/"><li>Civil Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/computer-engineering/"><li>Computer Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/electrical-engineering/"><li>Electrical Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/electronics-engineering/"><li>Electronics Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/industrial-engineering/"><li>Industrial Engineering</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-engineering-and-architecture/mechanical-engineering/"><li>Mechanical Engineering</li></a>
                        </ul>
                        <div class="x6">
                            COLLEGE OF COMPUTER AND INFORMATION SCIENCE
                        </div>
                        <ul class="list6">
                            <a href="https://mcm.edu.ph/programs/college-of-computer-and-information-science/computer-science/"><li>Computer Science (CS)</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-computer-and-information-science/information-systems/"><li>Information Systems (IS)</li></a>
                            <a href="https://mcm.edu.ph/programs/college-of-computer-and-information-science/entertainment-and-multimedia-computing/"><li>Entertainment and Multimedia Computing (EMC)</li></a>
                        </ul>
                    </p>
                </div>
                
          </div>
      </main>

</body>
</html>

​

请忽略一些丢失的图像。请随时提出一些解决我的问题的办法，谢谢！

Answer 1

因为您的侧边栏和content在同一个选项卡(也就是主体)中，而整个正文处于溢出状态，这使得整个正文可以滚动。您可以通过使内容div可滚动来避免这种情况。

.content{
height: 100vh;
    overflow-y: auto;
}