0

Создаю приложение и нужно сверстать вот такую страницу. Меня интересуют конкретно 3 контейнера: хедер, сайдбар и главный контейнер(как я понял все через position: fixed, но не уверен наверняка). Не знаю как правильно верстать подобные страницы. Кода кинуть не могу, потому что делаю приложуху на реакт. Буду благодарен за разъяснения!

введите сюда описание изображения

1 ответ 1

2

.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>

4
  • Прошу прощения, не ту страницу скинул... Поменял изображение
    – Torin_21
    Commented 17 нояб. 2020 в 17:46
  • @Torin_21 Обновил
    – Vearodev
    Commented 17 нояб. 2020 в 17:51
  • Хотел уточнить. Мне нужно, что все это занимало все место в окне браузера и при этом без скролла, но он у менять есть. А суть в том, что его не должно быть, на странице будет присутствовать пагинация. Как это пофиксить?
    – Torin_21
    Commented 17 нояб. 2020 в 18:52
  • @Torin_21 Скролла вообще не будет? Тогда можете к .container задать overflow:hidden
    – Vearodev
    Commented 17 нояб. 2020 в 21:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.