Мне нужно сделать этот макет адаптивным. Как это сделать?

Question

(Я его уже сверстал) Как сделать чтоб при сжатии экрана Navigation прижался к header, related links прижался к footer, а Main занял основную ширину? Понимаю что через медиа запросы, но как?

Answer 1

Задает навигации position: fixed, ставите top размером header, задаете ему 100% ширину

С футером делаете тоже самое только bottom ставите размером footer

Answer 2

Примерно так, на flexbox это проще чем куча position = смотрим и если что то не устроило - пишем и поясняем что именно

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  justify-content: space-between;
  flex: 1 1 0;
}

.aside {
  min-width: 200px;
  padding-left: 20px;
}

.main {
  padding: 0 20px;
  background-color: #fff;
}

.header,
.footer {
  padding: 20px 0;
  text-align: center;
}

.aside:nth-child(1) {
  background-color: #FE9900;
}

.aside:nth-child(3) {
  background-color: #993366;
}

.header {
  background-color: #336697;
}

.footer {
  background-color: #669900;
}

@media (max-width: 760px) {
  .content {
    display: flex;
    flex-direction: column;
  }
  .header,
  .footer {
    padding: 10px 0;
    color: #fff;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=">


<div class="wrapper">
  <div class="header">
    <h3>Шапка сайта</h3>
  </div>
  <div class="content">
    <div class="aside">
      <h3>Навигация</h3>
    </div>
    <div class="main">
      <h3>Основной контент</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nisi recusandae excepturi inventore sunt laboriosam nemo iusto veritatis expedita quae quisquam ea laborum provident qui quaerat, odit earum quasi nostrum.</p>
    </div>
    <div class="aside">
      <h3>Полезные ссылки</h3>

    </div>
  </div>
  <div class="footer">
    <h3>Подвал</h3>
  </div>
</div>

БЛОГ НА HUSL

Мне нужно сделать этот макет адаптивным. Как это сделать?

Ответы (2 шт):