Фиксированный header с шириной контейнера

Question

На сайте есть контейнер, внутри которого находится header. Внутри хедера две навигационные панели по бокам, позиционированные с помощью flex

Html

<header className={styles.header}>
            <nav>
                <ul className={styles.navlist}>
                   // Несколько li
                </ul>
            </nav>


            <nav className={styles.navauth}>
                <ul className={styles.navlist}>
                    // Несколько li
                </ul>
            </nav>


            <BurgerButton /> - Просто бургер кнопка
</header>

css

.container
  max-width: 1240px
  min-height: 100vh
  padding: 20px
  margin: 0 auto

.header
  display: flex
  justify-content: space-between
  align-items: center
  background-color: rgba(1, 1, 1, .9)
  z-index: 5

Цель - сделать хедер фиксированным, чтоб при скролле он всегда прилипал к верху экрана

Если задать position: fixed, ширина хедера становится равной ширине вложенного контента При этом, если задать width: 100%, ширина становится шириной всего экрана, а не шириной контейнера (херед находится внутри контейнера)

Вопрос - как, собественно, сделать этот хедер, чтобы он шириной был ровно ширине контейнера, в котором находится, но при этом был фиксированным

Answer 1

body {
  background-color: #ddd;
  font-family: sans-serif;
}

.container {
  background-color: #ada;
  width: 100%;
  min-width: 320px;
  max-width: 500px;
  margin: 100px auto;
}

.header {
  background-color: #8d8;
  min-height: 100px;
  display: flex;
  position: sticky;
  top: 0;
}

.content {
  font-size: 120%;
  padding: 100px;
  padding-top: 0;
}

.content h1 {
  color: #242;
}

.content p {
  color: #464;
}

<div class="container">
  <div class="header">
  </div>
  <div class="content">
    <h1>Lorem ipsum dolor</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut libero tristique, dictum urna in, sagittis sapien. Cras at elit elit. Aliquam consequat eu enim a rhoncus. Praesent efficitur aliquet dolor, eget commodo nunc facilisis quis. Curabitur ornare
      velit sed erat aliquet, malesuada varius lectus mattis. Fusce et volutpat nibh. Phasellus aliquam ultricies diam quis sagittis. Donec congue eros ac eros vestibulum fringilla. Sed vitae consequat dui. Nulla placerat nisi massa, vitae pharetra quam
      hendrerit fringilla. Curabitur imperdiet, sapien quis fermentum sagittis, lacus leo convallis sem, sed efficitur eros purus quis risus. Suspendisse bibendum sodales eleifend.
    </p>
    <p>
      Donec eleifend sem accumsan, vehicula odio vitae, sollicitudin nisi. Curabitur nec justo ultricies, aliquet mi ut, finibus sapien. Nullam sodales, urna sit amet sodales gravida, ex libero tincidunt enim, eu gravida lorem orci quis tellus. Nullam tortor
      massa, finibus in justo vitae, accumsan dictum quam. Morbi metus odio, dignissim vitae lacus in, pellentesque lobortis magna. Nullam ultrices viverra elit. Praesent vehicula lacinia lorem, eget tempor turpis tempor ut. Proin quam odio, accumsan
      vitae ullamcorper in, eleifend sed libero. Proin imperdiet maximus risus quis sodales. Aenean id quam metus. Ut sed finibus purus, nec laoreet dui. Duis magna mauris, vestibulum eu commodo vitae, blandit id nibh. In sollicitudin lacus mauris, nec
      maximus justo pellentesque ut. In at posuere lectus. Etiam lectus nibh, vulputate ac sapien a, lobortis placerat ex.
    </p>
  </div>
</div>

БЛОГ НА HUSL

Фиксированный header с шириной контейнера

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