如何使用CSS在侧边栏制作内容表?

Question

我想做一个网页与侧边栏的内容表(TOC)像这样:

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

TOC当前位于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显示为侧边栏?

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