Question

我的ID为sideNav的左div和右main的div是这样的

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10">
    ...
  </main>
</div>

代码可以正常工作，但是main的左侧部分现在位于sideNav的后面。当我删除sideNav CSS的position属性时，我的div再次正确显示，但是sideNav不再固定，并随页面滚动。

如何保持sideNav固定并正确显示div？

Answer 1

这不适用于您的原因是因为该行的显示类型为flex，所以下面的所有列都适合该行。

您的cols然后通过其给定值（例如， col-3 col-4等

通过更改列显示类型（在示例中固定），将其从弹性间距中移除，因此主导航将向左移动，因为您没有偏移它。

要解决此问题，请不要像其他人建议的那样添加填充，BootStrap具有处理此问题的类。而是将offset-2添加到您的主导航中，然后将其他所有内容保持不变。

示例代码段

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10 offset-2">
    ...
  </main>
</div>

Answer 2

那是因为固定被其他容器“忽略”了。就像是绝对的，这是手语。您可以为侧边栏设置固定宽度，为主栏添加填充。

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
  width: 350px;
}

main {
  padding-left: 350px;
}

Codepen

Answer 3

让我们尝试一下

为sideNav添加大约40像素的宽度；向左填充相同的iam放置＃main-content。

html

          <div class="row">
            <!-- navigation sidebar -->
            <div class="col-2 pt-5" id="sideNav">
            <p>paragraph...</p>
           </div>
           <!-- main content area -->
           <main class="col-10" id="main-content">
             <p>paragraph...</p>
             <p>paragraph...</p>
           </main>
           </div>

css

        #sideNav {
            background-color: #012d20;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            overflow: hidden;
            border-right-style: groove;
            height: 100%;
            width:40px;
         }

         #main-content{
          width:100%;
          float:left;
          padding:0 0 0 40px;
          background:yellow;
         }

Answer 4

我看到您正在使用引导网格，因此为了保持网格正常工作，我建议将固定容器放入.col-2 div

 #sideNav {
      background-color: #012d20;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow: hidden;
      border-right-style: groove;
      height: 100vh;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <!-- navigation sidebar -->
      <div class="col-2 pt-5">
        <div id="sideNav">
          ...
        </div>
      </div>

      <!-- main content area -->
      <main class="col-10">
        ...
      </main>
    </div>

无法固定左侧边栏

4 个答案: