Хочу сделать для персонального сайта следующую разметку: вся страница делится на 3 столбца. Слева 3/16 от ширины окна занимает древовидная структура сайта, справа 3/16 от ширины окна занимает оглавление. По центру оставшиеся 10/16 от ширины окна занимает содержимое страницы. Левый и правый столбец должен быть фиксированным по высоте и занимать 100% от высоты окна. Столбец по середине может быть сколь угодно длинным по высоте, но минимум 100% от высоты окна.
При прокручивании длинного содержимого левый и правый столбец не должны прокручиваться. Они должны стоять на месте. Если контент в них окажется слишком длинным, в левом и правом столбце будет своя прокрутка.
Пример похожего сайта:
https://squidfunk.github.io/mkdocs-material/
Я не верстальщик, знаю лишь базовые вещи по HTML и CSS. Я сам использую для создания сайта Semantic UI
https://semantic-ui.com
Я решил использовать для создания структуры сайта элемент grid:
https://semantic-ui.com/collections/grid.html
Пишу:
<body>
<div id="page" class="ui grid">
<div id="site-tree" class="three wide column"></div>
<div id="page-content" class="ten wide column"></div>
<div id="toc" class="three wide column"></div>
</div>
</body>
В документации написано, что элемент grid построен на flex-ах, но я чёт не найду никак в интернете нормального ответа на свой вопрос. Посмотрел через devtools, как сделан сайт-пример, но там не флексы...
Заранее спасибо!
----
Разобрался сам. Оказывается,
flex-child не может быть
position: fixed, потому что
fixed как бы «выдёргивает» этот блок из общего потока элементов страницы. Мне следовало добавить новый
div в
flex-child, и уже вложенный
div делать фиксированным.
Однако, как я потом сам разобрался, для моей разметки
flex не нужен. Я сделал для себя простенький прототип без
flex, на котором всё проверил и проработал:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body > div {
text-align: center;
}
#site-content {
margin-left: 200px;
margin-right: 200px;
background-color: coral;
height: 200vh;
padding-left: 300px;
padding-right: 300px;
}
#site-map {
position: fixed;
background-color: cadetblue;
left: 0;
top: 0;
width: 200px;
bottom: 0;
}
#toc {
position: fixed;
background-color: darkolivegreen;
right: 0;
top: 0;
width: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="site-map">1</div>
<div id="site-content">2</div>
<div id="toc">3</div>
</body>
</html>
Спасибо всем, кто откликнулся!
Простой
Простой
