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

Question

I would like to make a webpage with a sidebar table of contents (TOC) like this:

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

The TOC is currently at the top of the HTML page this way:

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

How can I create a CSS file so that such a TOC appears as a sidebar?

Answer 1

You can use position absolute and fixed to solve our problem.

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