Создаю приложение и нужно сверстать вот такую страницу. Меня интересуют конкретно 3 контейнера: хедер, сайдбар и главный контейнер(как я понял все через position: fixed, но не уверен наверняка). Не знаю как правильно верстать подобные страницы. Кода кинуть не могу, потому что делаю приложуху на реакт. Буду благодарен за разъяснения!
1 ответ
.container {
display: flex;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100vh;
}
body {
margin: 0;
padding: 0
}
.header {
background: green;
height: 50px
}
.sidebar {
width: 15%;
height: 100%;
background: orange;
}
.content {
background: yellow;
display: flex;
flex-grow: 3
}
<div class="container">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
-
Прошу прощения, не ту страницу скинул... Поменял изображение– Torin_21Commented 17 нояб. 2020 в 17:46
-
-
Хотел уточнить. Мне нужно, что все это занимало все место в окне браузера и при этом без скролла, но он у менять есть. А суть в том, что его не должно быть, на странице будет присутствовать пагинация. Как это пофиксить?– Torin_21Commented 17 нояб. 2020 в 18:52
-
@Torin_21 Скролла вообще не будет? Тогда можете к .container задать overflow:hidden– VearodevCommented 17 нояб. 2020 в 21:38