Меню + слайдер на странице полной ширины и высоты

Question

Я собираю очень простую веб-страницу, как часть обучающего упражнения.

Как вы можете разместить следующие 2 элемента так, чтобы они заполняли страницу (100% ширины и 100% высоты):

1. Меню
2. Ползунок с переменными изображениями

.container {
  position: relative;
  height: 100vh;
  width: 100%;
}

.menu {
  position: absolute;
  height: 100px;
  top: 0;
  left: 0;
}

.slider {
  position: absolute;
  top: 100px;
  max-height: 100vh;
}

.slider img {
  max-height: 100vh;
  object-fit: cover;
}

<div class="container">
  <div class="menu">
    Menu
  </div>

  <div class="slider">
    <img src="https://placehold.it/2000x2000">
  </div>
</div>

Большое спасибо!

Answer 1

Убедитесь, что у основного текста нет полей или отступов. И установите переполнение контейнера на hidden, чтобы содержимое не просыпалось. Возможное решение будет выглядеть так:

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.menu {
    height: 100px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: coral;
}

.slider {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    box-sizing: border-box;
    background: cornflowerblue;
}

.slider img {
    width:100%;
}

<div class="container">
    <div class="menu">Menu</div>
    <div class="slider">
        <img src="https://placehold.it/2000x2000">
    </div> 
</div>