Unnecesary height of html page - html

Question

my html page has this unwanted white patch in the bottom and I don't know why. I don't want to be able to scroll down that long. It stays there regardless by default. it dissapears when I hover on the left(front) element but reappears when I hover on the right(behind) element.
here is the codepen : https://codepen.io/aronnora/pen/ExjJrag
<nav class="nav_bar">
<img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo">
<div class="trans" id="trans"> trans energy solutions </div>
<ul class="ul">
<li class="li1">Home</li>
<li class="li2">About Us</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Facility</li>
<li class="li6">Testing</li>
<li class="li7">Clients</li>
<li class="li8">Contact</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

your div takes a default height as it's content. so just add overflow:hidden; to class (.tow)
.two {
height: 58.29rem;
width: 45rem;
transition: opacity 1s;
background-color: black;
position: absolute;
z-index: 10;
overflow: hidden;
}