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

Question

我在屏幕左侧有一个垂直导航栏。它的高度是视口(viewport)的 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>

Answer 1

您可以在页面加载时获取 .sideNav 的宽度，并应用与 .content 的 padding-left 相同的宽度更多，像这样

window.addEventListener('DOMContentLoaded', function() {
  var sideNavWidth = document.querySelector('.sideNav').clientWidth;
  var content = document.querySelector('.content');

  content.style.paddingLeft = sideNavWidth + 10 + 'px';
});

.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>