Как сделать так, чтоб правый блок меню с position:sticky не перекрывал header?

По какой-то причине при скролле правый блок в конце прокрутки накладывается на header. Происходит это при уменьшении окна браузера.

1. Маленькое окно браузера введите сюда описание изображения Также этот "эффект" можно увидеть в сниппете, который приложен ниже

2. Большое окно браузера введите сюда описание изображения

Мой код:

header {
  width: 100%;
  height: 50px;
  background: yellow;
  display: flex;
  justify-content: center;
  position: fixed;
}

header ul li {
  display: inline-block;
  list-style: none;
  margin-right: 30px;
}

.content {
  padding-top: 50px;
}

.wrapper {
  display: flex;
  width: 700px;
  margin: 0 auto;
  height: 900px;
}

.left_content {
  width: 95%;
  height: 800px;
  background: #ffdede;
  padding: 10px;
}

.ad_block {
  display: inline-block;
  width: 40%;
  height: 400px;
  top: 58px;
  position: sticky;
  background: yellowgreen;
}
<header>
  <ul>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
  </ul>
</header>
<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat!
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam voluptatibus incidunt ipsa, tempore fuga veniam et consectetur alias nulla adipisci voluptas! Mollitia, excepturi voluptatibus animi aliquid numquam perferendis architecto accusantium. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque inventore, cumque architecto asperiores a soluta deserunt cupiditate quae quisquam necessitatibus commodi, aliquam reprehenderit adipisci sequi iste fugiat, recusandae voluptatem distinctio.
  </p>
</div>
<div class="wrapper">
  <div class="left_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa.</div>
  <div class="ad_block">
    <ul>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
    </ul>
  </div>
</div>

В чем может быть проблема?


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

Автор решения: KopteLove

Потому что вы задаете фикс высоту для блока .ad_block и при маленькой высоте окна, он просто не умещается

<header>
  <ul>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
    <li><a href="">text</a></li>
  </ul>
</header>
<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat!
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, illo accusamus corrupti facere exercitationem quis amet aperiam ipsam illum ex laudantium nesciunt dicta iure qui tempore id at, alias repellat! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam voluptatibus incidunt ipsa, tempore fuga veniam et consectetur alias nulla adipisci voluptas! Mollitia, excepturi voluptatibus animi aliquid numquam perferendis architecto accusantium. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque inventore, cumque architecto asperiores a soluta deserunt cupiditate quae quisquam necessitatibus commodi, aliquam reprehenderit adipisci sequi iste fugiat, recusandae voluptatem distinctio.
  </p>
</div>
<div class="wrapper">
  <div class="left_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non placeat explicabo minus vero quae illum debitis facere sint consequatur, quia, perspiciatis reprehenderit quas eligendi, reiciendis repellendus sit officia provident. Porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem fugiat, vel totam ullam quaerat asperiores quidem blanditiis optio natus quos laborum deserunt repellendus quod dignissimos excepturi non iure ducimus ipsa.</div>
  <div class="ad_block">
    <ul>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
      <li><a href="">text</a></li>
    </ul>
  </div>
</div>
body {
  margin: 0; /* обнулим отступы*/
}

header {
  width: 100%;
  height: 50px;
  background: yellow;
  display: flex;
  justify-content: center;
  position: fixed;
}

header ul li {
  display: inline-block;
  list-style: none;
  margin-right: 30px;
}

.content {
  padding-top: 50px;
}

.wrapper {
  display: flex;
  width: 700px;
  margin: 0 auto;
  height: 900px;
  align-items: flex-start; /* для того чтобы высота блока зависила от контента*/
}

.left_content {
  width: 95%;
  height: 800px;
  background: #ffdede;
  padding: 10px;
}

.ad_block {
  display: block;
  width: 40%;
  top: 50px;
  position: sticky;
  background: yellowgreen;
  overflow: auto; /* при переполнении позволим прокрутку этого блока*/
  /* высоту рассчитываем 100vh(высота окна просмотра) - 50px (высота header) - 17px(высота гориз скролла)*/
  max-height: calc(100vh - 50px - 17px);
}

Пример решения

→ Ссылка