Блог

Главная - Вопросы по программированию - Как создать оглавление в боковой панели с помощью CSS?

Как создать оглавление в боковой панели с помощью CSS?

#html #css #tableofcontents

Вопрос:

Я хотел бы создать веб-страницу с оглавлением боковой панели (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 отображался как боковая панель?

Комментарии:

1. Что вы уже пробовали? StackOverflow не является бесплатным сервисом для кодирования. Ожидается, что вы приложите все усилия, чтобы сначала решить проблему самостоятельно. Затем, если у вас не получится, найдите в Интернете причину сбоя. Если вы сделали все это и все равно не добились успеха, вернитесь сюда, покажите свою лучшую попытку, объясните, почему она терпит неудачу и чего вы ожидаете взамен.

2. Вы пробовали дать ему класс css .work-as-I-want { position: ideal; all-browsers-and-resolutions: yes; } ?

Ответ №1:

Вы можете использовать position 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>
Метки: