Question

问题是我必须使带有侧边类的 div 可滚动，但带有图片的右侧不能。目前它不可滚动，因为位置不固定（截图）：

但是如果我将 position:fixed; 添加到side class - 它可以滚动，但右侧会向左移动，这很糟糕。

body {
     background-color: #2e7744;
     overflow:hidden;
}

.aside {
    height: 100%;
    overflow-y: auto;
    position:fixed;
 }

<body>
<div class="container-fluid">
  <div class="row">
    <div class="aside col-lg-3">
        <nav class="menu background sidebar card mb-4">
            <ul class="nav flex-column">
                 <li class="nav-item">
                     <span class="nav-link" style="background-color: #71a4ff66">
                          <b class="header">Cat 1</b>
                     </span>
                        <ul class="background">
                            <li class="nav-item hover">
                                <a class="poster-link " href="/poster/index.php?pid=3">
                                     <div>Pic 1</div>
                                </a>
                            </li>
                        </ul>
                  </li>
                  <li class="nav-item">
                        <span class="nav-link">
                            <b class="header">Cat 2</b>
                        </span>
                        <ul class="background">
                             <li class="nav-item hover">
                                 <a class="poster-link " href="/poster/index.php?pid=1">
                                    <div>Text 1</div>
                                 </a>
                             </li>
                        </ul>
                   </li>
             </ul>
        </nav>
    </div>
    <div class="col-sm-12 col-lg-12 col-xl-4 mt-4">
       <div class="row">
            <div class="col-sm-12">
                  Picture with text  
            </div>
        </div>
    </div>
 </div>
</div>
</body>

有没有办法快速解决这个问题？这种 HTML 结构在移动设备上运行良好，我必须以某种方式保存它。

有什么想法吗？

Answer 1

您需要做的是将菜单窗格封装在一个 div 中，然后相对于其父 div 分配在菜单窗格类中固定的位置。

以下是证明相同的代码：

* {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
}

.container-fluid {
  width: 100%;
  display: grid;
  grid-template-columns: 30% 70%;
}

.left_pane {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu_pane {
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100vh;
  width: 30%;
}

.menu_pane a {
  padding: 25px 20px;
  background: black;
  color: white;
  border: 1px solid black;
  text-align: center;
  font-size: 50px;
  text-decoration: none;
  transition: 0.4s;
}

.menu_pane a:hover {
  background: white;
  color: black;
}

.right_pane {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.content_pane {
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
}

.content_pane h1 {
  font-size: 50px;
  text-transform: uppercase;
  padding-bottom: 20px;
}

.content_pane p {
  font-size: 20px;
  width: 70%;
}

<div class="container-fluid">
  <div class="left_pane">
    <div class="menu_pane">
      <a href="#/">Button 1</a>
      <a href="#/">Button 2</a>
      <a href="#/">Button 3</a>
      <a href="#/">Button 4</a>
      <a href="#/">Button 5</a>
      <a href="#/">Button 6</a>
      <a href="#/">Button 7</a>
      <a href="#/">Button 8</a>
      <a href="#/">Button 9</a>
      <a href="#/">Button 10</a>
      <a href="#/">Button 11</a>
      <a href="#/">Button 12</a>
    </div>
  </div>
  <div class="right_pane">
    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="content_pane">

      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

  </div>
</div>

使用位置固定在左侧滚动菜单

1 个答案:

以下是证明相同的代码：