sindzicat
@sindzicat
Инженер-конструктор, программист-самоучка (Python)

Как правильно сделать разметку веб-страницы (решено)?

Хочу сделать для персонального сайта следующую разметку: вся страница делится на 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>


Спасибо всем, кто откликнулся!
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Zombie42679
Пытаюсь верстать, учу JS, когда-нибудь стану топом
Если честно не совсем понимаю, в чем вопрос. Вы хотите сверстать сайт не зная вёрстки ?

Можно использовать бутстрап, в документации поменять на 16колоночный режим и делать как вы писали, 4ый бутстрап так же на флексах.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Wunder Fund Москва
от 60 000 до 80 000 руб.
YLab Тольятти
от 70 000 до 130 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.