时间戳

首页 > 解决方案 > 侧边栏不滚动完整内容

html - 侧边栏不滚动完整内容

问题描述

我有一个布局，其中有标题、侧边栏和主要部分。

我有一个固定的侧边栏。里面有35节。滚动条未覆盖所有内容。我的滚动条直到 32 节才可见。

我已经尝试了很多但无法做到。我认为问题出在.sidenav财产上top

这是我的代码 PenCode链接

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
    }

    .sidenav {
      height: 100%;
      width: 300px;
      position: fixed;
      z-index: 1;
      top: 50;
      left: 0;
      background-color: white;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .sidenav a {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 32px;
      color: #818181;
      display: block;
    }

    .sidenav a:hover {
      color: #f1f1f1;
    }

    .main {
      margin-left: 300px;
      /* Same as the width of the sidenav */
      font-size: 28px;
      /* Increased text to enable scrolling */
      padding: 0px 10px;
    }
  </style>
  <script>
    $(function () {
      $("#accordion").accordion({
        collapsible: true,
        heightStyle: "content",
        active: false
      });

      $( "h3" ).click(function() {
          $('.sidenav').scrollTop(document.getElementById(this.id).offsetTop);
        });
    });
  </script>
</head>

<body>
  <div class="header" style="min-height:100px; border: 1px solid black;">
    <h1>Header</h1>
  </div>
  <div class="sidenav">
    <div id="accordion">
      <h3 id="w1">Section 1</h3>
      <div>
      </div>
      <h3 id="w2">Section 2</h3>
      <div>
      </div>
      <h3 id="w3">Section 3</h3>
      <div>
      </div>
      <h3 id="w4">Section 4</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w5">Section 5</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w6">Section 6</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w7">Section 7</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w8">Section 8</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w9">Section 9</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w10">Section 10</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w11">Section 11</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w12">Section 12</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w13">Section 13</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w14">Section 14</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w15">Section 15</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w16">Section 16</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w17">Section 17</h3>
      <div>
        <p>
        </p>
      </div>
      <h3 id="w18">Section 18</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w19">Section 19</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w20">Section 20</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w21">Section 21</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w22">Section 22</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w23">Section 23</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w24">Section 24</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w32">Section 32</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w26">Section 26</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w27">Section 27</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w28">Section 28</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w29">Section 29</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w30">Section 30</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w31">Section 31</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w32">Section 32</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w33">Section 33</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w34">Section 34</h3>
      <div>
        <p></p>
      </div>
      <h3 id="w35">Section 35</h3>
      <div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="main">
    <h2 style="text-align: center;">Main Section</h2>
  </div>
</body>

</html>

标签： htmlcss

解决方案

在你的.sidenav 课堂上替换这个

height: 100%;

和

height: calc(100% - 100px);

提示：你不需要top: 50;and left: 0;。

推荐阅读