html - 修复了居中博文旁边的侧边栏

Question

对于包含大量文本的页面，读者应该能够轻松地在各个部分之间导航。因此，我想在主文本的左侧显示一个永久可见的索引。正文应居中，并应占屏幕的 75% 左右。

我已经胡思乱想了几个小时，但我似乎无法把它弄好。列重叠，或者它们之间有空白并且不能很好地居中。

HTML

<div class="wrapper">
<div class="row">
    <!-- Sidebar -->
    <nav id="sidebar">
        <ul> Content
            <li><a href="#Guidelines">Guidelines</a> </li>
            <li><a href="#Geographic Focus">Geographic Focus</a> </li>
            <li><a href="#Fields of Interest">Fields of Interest</a> </li>
        </ul>
    </nav>
   <div id="content">
                <div id="blog">
                </div>
   </div>
 </div>
 </div>

CSS

.wrapper .row {
    display: flex;
    border-style:solid;
    width:100%;
    justify-content:center;
    align-content: center;
    align-self:center;
}          

#sidebar {
  position: fixed;
  display:flex;
  border-style:solid;
  min-height:100vh;
  color:black;
  flex-direction:column;
  padding-top:70px;
  width: auto;
}

#blog {
  float: left;
  width:75%;
  padding:0;
  border-style:solid;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Answer 1

根据评论更新

除了grid，使用flexbox将导航移向内容

原始答案

您可以使用 CSS Grid 创建此布局。示例:

.wrapper {
  display: grid;
  grid-template-columns: 25% 75%;
}

#sidebar {
  display: flex;
  justify-content: flex-end;
}

#sidebar ul {
  position: fixed;
  display: grid;
  align-content: center;
  height: 100%;
  max-width: 25%;
  padding: 0;
}

<div class="wrapper">
  <nav id="sidebar">
    <ul> Content
      <li><a href="#Guidelines">Guidelines</a> </li>
      <li><a href="#Geographic Focus">Geographic Focus</a> </li>
      <li><a href="#Fields of Interest">Fields of Interest</a> </li>
    </ul>
  </nav>
  <div id="content">
    <div id="blog">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
      
    </div>
  </div>
</div>