Назначение высоты 100vh моему основному контейнеру, чтобы все содержимое страницы было без прокрутки

Question

Я хочу, чтобы весь контейнер моего раздела был на экране, чтобы пользователь не прокручивал вниз с помощью мыши, чтобы увидеть все, что было выложено. Я назначил своему основному контейнеру высоту 100vh, но, тем не менее, он продолжает прокручиваться.

Есть помощь? Ниже код и ручка кода.

HTML

<div class="main_container">
<h3>404 not found</h1>
    <div class="wrapper">
        <div class="wrapper__item img">
            <img src="https://images.unsplash.com/photo-1540786121371-70e1e61ac897?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
                alt="scarecrow">
        </div>
        <div class="wrapper__item text">
            <h2>I have bad news <br> for you</h2>
            <p class="text">
                The page you are <br>looking
                for might be removed or <br> is
                temporarily unavailable
            </p>
            <a href="#" id="btn">Back to Homepage</a>
        </div>
        
    </div>
   <div class="markup">Created By</div>
</div>

CSS 
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;900&family=Space+Mono:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


body {
    font-size: 10px;
    font-family: 'Inconsolata',
        monospace;
    font-family: 'Space Mono',
        monospace;
}


.main_container {
    height: 100vh;
}

h3 {
    margin: 2rem 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-family: 'Inconsolata',
        monospace;
}



.img img {
    display: inline-block;
    width: 70%;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 10rem;
    margin-right: 1.6rem;
    height: 100vh;
    width: 80%;
    margin: auto;
}

.wrapper h2 {
    margin-bottom: 2rem;
    font-size: 2.6rem;
}

.wrapper p {
    font-size: 1.3rem;
}


#btn {
    font-size: 1rem;
    margin-top: 2rem;
    display: inline-block;
    text-decoration: none;
    background: #000;
    color: #ffff;
    padding: 1rem;
}

.markup{
    text-align: center;
    font-size: 1.3rem;
}

https://codepen.io/Helye23/pen/vYGYovj

Answer 1

Вы можете просто использовать position: relative на своем main_container, чтобы высота веб-страницы соответствовала высоте экрана. Вам также не нужна высота в .wrapper

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;900&family=Space+Mono:wght@400;700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main_container {
  position: relative;
}

body {
  font-size: 10px;
  font-family: 'Inconsolata', monospace;
  font-family: 'Space Mono', monospace;
}

h3 {
  margin: 2rem 1.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-family: 'Inconsolata', monospace;
}

.img img {
  display: inline-block;
  width: 70%;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10rem;
  margin-right: 1.6rem;
  width: 80%;
  margin: auto;
}

.wrapper h2 {
  margin-bottom: 2rem;
  font-size: 2.6rem;
}

.wrapper p {
  font-size: 1.3rem;
}

#btn {
  font-size: 1rem;
  margin-top: 2rem;
  display: inline-block;
  text-decoration: none;
  background: #000;
  color: #ffff;
  padding: 1rem;
}

.markup {
  text-align: center;
  font-size: 1.3rem;
}

<div class="main_container">
  <h3>404 not found</h3>
  <div class="wrapper">
    <div class="wrapper__item img">
      <img src="https://images.unsplash.com/photo-1540786121371-70e1e61ac897?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="scarecrow">
    </div>
    <div class="wrapper__item text">
      <h2>I have bad news <br> for you</h2>
      <p class="text">
        The page you are <br>looking for might be removed or <br> is temporarily unavailable
      </p>
      <a href="#" id="btn">Back to Homepage</a>
    </div>

  </div>
  <div class="markup">Created By</div>
</div>

Answer 2

это проблема переполнения. добавить .main-container{ overflow:hidden; }

Answer 3

Ваш .wrapper имеет height: 100%, но ваш h3 выше этого, поэтому высота содержимого вашего .main-container всегда будет 100% + h3 height, что каждый раз приводит к переполнению.

Если страница все еще переполняется, чем ваш контент слишком велик для экрана пользователя, и это всегда может произойти. Никогда нельзя верить, что у каждого пользователя есть большой экран. Альтернативой этому могут быть реальные размеры вашего img и текста, которые приводят к уменьшению размера элементов с меньшим экраном.