如何使用 CSS 在侧边栏中制作目录？

Posted 2023-03-24

【中文标题】如何使用 CSS 在侧边栏中制作目录？

【英文标题】：How to make table of contents in sidebar using CSS?

【发布时间】：2021-12-15 01:44:47

【问题描述】：

我想制作一个带有侧边栏目录 (TOC) 的网页，如下所示：

https://bookdown.org/yihui/bookdown/html.html

目录目前以这种方式位于 HTML 页面的顶部：

<h2>Table of Contents</h2>
<div id="text-table-of-contents">
  <ul style="list-style-type:none">
    ...
    <li><a href="#orgbdecee3">Topic 1</a></li>
  </ul>
</div>

如何创建 CSS 文件以使这样的 TOC 显示为侧边栏？

【问题讨论】：

到目前为止你尝试过什么？ *** 不是免费的编码服务。您应该先尽最大努力自己解决问题。然后，如果你失败了，请在网上搜索它可能失败的原因。如果您已经完成了所有这些但仍然没有成功，请回到这里，展示您的最佳尝试，解释它是如何失败的以及您的期望。

你试过给它一个css类.work-as-I-want position: ideal; all-browsers-and-resolutions: yes; 吗？

【参考方案1】：

您可以使用位置absolute 和fixed 来解决我们的问题。

.grid
position:relative;
  width:100%;
  height:100vh;
  color:#fff;
  
  


.one
position:fixed;
top:0;
left:0;
bottom:0;
width:25%;
background:#333;

.two
position:absolute;
top:0;
left:25%;
bottom:0;
width:75%;
background:#999;
height:120%;

<div class="grid">
  <div class="one">aaa</div>
  <div class="two">aaa</div>
</div>