Menu + slider in a full width and height page

Question

I'm putting together a very simple webpage, part of a learning exercise.

How can you place the following 2 elements so that they fill up a page (100% width and 100% height):

1. A menu
2. A slider with variable images

.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

Make sure the body has no margin or padding. And set the overflow of the container to hidden to make sure no content spills out. A possible solution would look like this:

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>