I want this element to cover 100% of the screen height, apparently it doesn't do that, is there any workaround? I see that the height of the div is 100% of the section, and the height of the section is 100% of the body, while the body is set to 100%.
<body>
<section id="Block1">
<div class="firstsection">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo magnam iusto quibusdam quas reiciendis fugit architecto consequatur similique distinctio dolore repudiandae rem illo alias iure sunt eos culpa, amet consectetur!</p>
</div>
</section>
</body>
CSS
body {
width: 100%;
height: 100%;
}
* {
padding: 0px;
margin: 0px;
}
.firstsection {
width: 50%;
height: 100%;
background-color: yellowgreen;
text-align: center;
}
#Block1 {
width: 100%;
height: 100%;
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Use this code as body:
body { height: 100vh; }