html - 任意宽度的垂直导航栏固定在左边。如何填充主要内容？

Question

我在屏幕左侧有一个垂直导航栏。它的高度是视口的 100%。它是固定的。它的宽度是任意的。

如何移动它下面的内容以使其不被掩盖？

这是我的问题的说明：

.sideNav {
  background-color: grey;
  height: 100%;
  position: fixed;
  top:0;
}

.content {}

<div class="sideNav">
  <ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Long Item Number Three</li>
    <li>Another Item of arbitrary length</li>
  </ul>
</div>

<div class="content">

  <p>Lorem ipsum dolor sit amet, liber feugait dolores mei id, per epicurei inimicus definiebas ne. Ne sumo equidem eam, no sit detracto constituto. Case graece offendit eum at, simul ullamcorper ne mel, fugit interesset cotidieque est no. Ius rebum iriure
    labitur ex. Eu sit atomorum tractatos, per liber officiis oportere eu, ea per perfecto repudiandae.</p>

  <p>Duo virtute voluptua ea. Scribentur instructior est ea, at cum eruditi pericula interesset. Impetus molestie intellegam usu no, has errem choro detracto ei. Has augue dicunt at, eos ei verear tamquam adipiscing. Eu ponderum consetetur nec. Consul scripta
    principes id eam.</p>

  <p>Eam illum facer sententiae at. Cum insolens constituto sadipscing ad, et eum ubique fuisset. Possit torquatos at mel. In diam mediocrem sea. Te hinc phaedrum has. Dolorum veritus appetere mei at.</p>

  <p>Has id docendi reprehendunt, numquam fuisset eu per. Has cu ubique insolens, te ius consul aperiam iudicabit. Electram efficiantur ut duo. No delectus maluisset liberavisse qui, ius et corpora repudiare. Est iuvaret corpora pertinacia te, mel eripuit
    appetere prodesset in, eos ei omnis salutatus.</p>

  <p>Mea cu choro option facilis, mei eu mutat laoreet eleifend. Sit oratio nullam doming ad, ut vix mucius aliquip, ut quot appetere pri. Ius ad ullum gloriatur, id putent mentitum eum, ne vero harum vix. Has ne vocibus expetenda. Mea sumo eros forensibus
    et, velit constituam his cu.</p>

  <p>Malis tincidunt ex ius, vis blandit mandamus ei. Veri tation praesent pri ut, ea pro habemus ponderum prodesset. Ex nam ubique maiestatis. Debet doming usu cu.</p>

  <p>Eum ad mutat probatus, no per mucius evertitur signiferumque, augue novum ut sed. Ad his omnium cetero, insolens deterruisset ei per, no clita tincidunt efficiantur mea. Quo tota feugiat et. Ex ipsum fabulas mea, cu sed consul nominavi salutatus. Fabulas
    fastidii disputando ut per, nibh suavitate sea no. Ex doming ceteros mei, mei in exerci dolores.</p>

</div>

标签： htmlcss

Answer 1

我会将sideNavandcontent元素添加到容器 div 中并使用 flex 定位，如下所示：

<div class="site-wrapper">
  <div class="sideNav">
    <ul>
      <li>Item One</li>
      <li>Item Two</li>
      <li>Long Item Number Three</li>
      <li>Another Item of arbitrary length</li>
    </ul>
  </div>
  <div class="content">

    <p>Lorem ipsum dolor sit amet, liber feugait dolores mei id, per epicurei inimicus definiebas ne. Ne sumo equidem eam, no sit detracto constituto. Case graece offendit eum at, simul ullamcorper ne mel, fugit interesset cotidieque est no. Ius rebum iriure
      labitur ex. Eu sit atomorum tractatos, per liber officiis oportere eu, ea per perfecto repudiandae.</p>

    <p>Duo virtute voluptua ea. Scribentur instructior est ea, at cum eruditi pericula interesset. Impetus molestie intellegam usu no, has errem choro detracto ei. Has augue dicunt at, eos ei verear tamquam adipiscing. Eu ponderum consetetur nec. Consul
      scripta principes id eam.</p>
  </div>
</div>

.site-wrapper{
  display: flex;
  height: 100vh;
}

.sideNav {
  padding: 2rem;
  background-color: grey;
  flex: 0 0 auto;
  max-width: 300px;
}

.content{
  flex: 1 1 auto;
  overflow: auto;
  padding: 2rem;
}

sideNav有一个max-width更大的屏幕。