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

根据评论更新

除sudo apt-get install ca-certificates-java之外，使用grid将导航移至内容

原始回答

您可以使用CSS Grid创建此布局。例如：

flexbox

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

Answer 2

删除固定位置并将其添加到#sidebar

#sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 21px;
}

不要忘记在小屏幕上覆盖粘性位置：）

Answer 3

下面的代码段为您提供初始镜头，对原始代码进行最少的更改。

仍然可能有更好的想法。这个想法根据要求放置一个固定的块，宽度为25％，并确保主要内容将这25％视为左边距。

<html>
<head>
<style type="text/css">
#sidebar {
  background: red; /* for visual testing */
  position: fixed;
  min-height:100vh;
  padding-top:70px;
  width: 25%;
}

#blog {
  background: blue; /* for visual testing */
  width:75%;
  margin-left: 25%;
  text-align: center;
}
</style>
</head>
<body>
    <!-- Sidebar -->
    <div 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>
    </div>
   <div id="content">
        <div id="blog">
            Test text.
        </div>
   </div>
</body>
</html>

固定侧边栏旁边的中心博客帖子

3 个答案: