Ненужная высота html страницы

Question

На моей html странице есть этот нежелательный белый патч внизу, и я не знаю почему. Я не хочу иметь возможность прокручивать так долго. Он остается там независимо от настроек по умолчанию. он исчезает при наведении курсора на левый (передний) элемент, но появляется снова при наведении курсора на правый (задний) элемент.

вот кодовая ручка: https://codepen.io/aronnora/pen/ExjJrag

<nav class="nav_bar">
  <a href="codepapa.html" target="_blank"><img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo"></a>
  <div class="trans" id="trans"> trans energy solutions </div>
  <ul class="ul">
    <li class="li1"><a href="Home.html" target="_blank">Home</a></li>
    <li class="li2"><a href="About.html" target="_blank">About Us</a></li>
    <li class="li3"><a href="#" target="_blank">Products</a></li>
    <li class="li4"><a href="#" target="_blank">Services</a></li>
    <li class="li5"><a href="#" target="_blank">Facility</a></li>
    <li class="li6"><a href="#" target="_blank">Testing</a></li>
    <li class="li7"><a href="#" target="_blank">Clients</a></li>
    <li class="li8"><a href="#" target="_blank">Contact</a></li>
  </ul>
</nav>
<div class="white">
</div>
<div class="pro">
  <div class="text">
    PRODUCTS
  </div>
</div>
<div class="total">
  <div class="one">
    <img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>

    <div class="downtextone">
      時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不注更ルモト点究サトケ別意マワ抜博写ミ元
    </div>
  </div>
  <div class="two">
    <img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
    <div class="downtexttwo">
      時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不
    </div>
  </div>
</div>

Answer 1

ваш div принимает высоту по умолчанию в качестве содержимого. так что просто добавьте переполнение: скрыто; к классу ( .tow )

.two {
    height: 58.29rem;
    width: 45rem;
    transition: opacity 1s;
    background-color: black;
    position: absolute;
    z-index: 10;
    overflow: hidden;
}