CSS Flexbox с компонентом, возвращающим TopBar и SideBar, и еще одним, возвращающим основной контент
У меня возникли проблемы с размещением основного контента рядом с боковой панелью в макете flexbox. Мои компоненты TopBar и SideBar объединены в один компонент, поэтому они возвращаются в одном родительском элементе div. Есть ли решение с использованием CSS flexbox или мне нужно использовать сетку?
Вот как он возвращается:
<div style = "display: flex; flex-wrap: wrap;">
<div id = "ParentNav">
<div style = "width: 100%; height: 48px; background-color: blue;">TopBar</div>
<div style = "width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
</div>
<div style = "flex-grow: 1; background-color: gold;">Main content</div>
</div>Это то, чего я хотел бы добиться визуально, но я не могу вернуть TopBar и SideBar отдельно.
<div style = "display: flex; flex-wrap: wrap;">
<div style = "width: 100%; height: 48px; background-color: blue;">TopBar</div>
<div style = "width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
<div style = "flex-grow: 1; background-color: gold;">Main content</div>
</div>Боюсь, что нет: у меня есть приложение Nextjs, в котором мои TopBar и SideBar объединены в один компонент ParentNav. TopBar имеет кнопку, позволяющую показать или скрыть компонент SideBar. Они объединены в ParentNav для изоляции клиентских компонентов от серверных компонентов. Возможно, есть другое решение, но я бы предпочел решить эту проблему с помощью css.
Есть ли предел структурным изменениям и можно ли применять этот стиль?
Я не могу изменять HTML (если только не изменяю свои компоненты, чего мне бы не хотелось), но я могу свободно стилизовать CSS.
Ответы 2
Если вы не можете изменить HTML...
Я думаю, что можно установить абсолютное положение верхней панели и сопоставить ее, задав поле на уровне верхней панели в верхней части навигационной панели, основного содержимого.
Пока стиль можно применять свободно.
Способ 1
абсолютная позиция и маржа
.wrapper {
position: relative;
}
.top-bar {
position: absolute;
}
.side-bar {
margin-top: 48px;
}
.main-content {
margin-top: 48px;
}<div class = "wrapper" style = "display: flex; flex-wrap: wrap;">
<div id = "ParentNav">
<div class = "top-bar" style = "width: 100%; height: 48px; background-color: blue;">TopBar</div>
<div class = "side-bar" style = "width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
</div>
<div class = "main-content" style = "flex-grow: 1; background-color: gold;">Main content</div>
</div>Метод2
использовать сетку
установите свойства как contents, чтобы дочерние элементы ParentNav можно было обрабатывать в сетке.
#ParentNav
.wrapper {
display: grid;
grid-template-columns: 256px 1fr;
grid-template-rows: 48px 1fr;
height: 100vh;
}
.wrapper>#ParentNav {
display: contents;
}
.wrapper>#ParentNav>.top-bar {
grid-column-start: 1;
grid-column-end: -1;
grid-row: 1;
}
.wrapper>#ParentNav>.side-bar {
grid-column: 1;
grid-row: 2;
}
.wrapper>.main-content {
grid-column: 2;
grid-row: 2;
}<div class = "wrapper">
<div id = "ParentNav">
<div class = "top-bar" style = "width: 100%; height: 48px; background-color: blue;">TopBar</div>
<div class = "side-bar" style = "width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
</div>
<div class = "main-content" style = "flex-grow: 1; background-color: gold;">Main content</div>
</div>Спасибо, это работает! Я считаю метод 1 довольно элегантным. Я пытаюсь исправить 2 проблемы: а) Когда мне приходится прокручивать из-за большого количества контента в Main, боковая панель не доходит до конца; б) Когда я уменьшаю ширину окна, Main перемещается под боковую панель, а не остается справа с горизонтальной полосой прокрутки.
Мне удалось решить две проблемы: а) Использование minHeight = "calc(100% - 48px)" на .side-bar; б) Установка flex-wrap: nowrap (или удаление гибкой оболочки) и overflow-x: auto в .wrapper
Я не смог помочь вам до конца :( Я так рад, что вы решили эту проблему! Если возникнет похожая проблема, я попробую ее решить. Спасибо, что поделились. @Theo
Да, вы можете использовать
flex-direction: column
чтобы получить необходимый результат.
Обновленный HTML-файл:
<div style = "display: flex; flex-direction: column; height: 100vh;">
<div style = "width: 100%; height: 48px; background-color: blue;">TopBar</div>
<div style = "display: flex; flex: 1;">
<div id = "ParentNav" style = "width: 256px; background-color: grey;">SideBar</div>
<div style = "flex-grow: 1; background-color: gold;">Main content</div>
</div>
</div>
К сожалению, я не могу настроить HTML, чтобы убрать TopBar из ParentNav.
Я попробовал и получил правильный результат, а затем поделился с вами решением. Однако вы не смогли изменить «ParentNav», и ваш отрицательный голос разочаровал таких пользователей, как я.
Нельзя ли удалить этот элемент?
<div id = "ParentNav">