<body class="signle-layout">
<section id="home" class="pt-page pt-page-1" data-id="home">
<p>some html css js items</p>
</section>
<section id="about" class="pt-page pt-page-2" data-id="about">
<p>some html css js items</p>
</section>
<section id="services" class="pt-page pt-page-3" data-id="services">
<p>some html css js items</p>
</section>
<section id="clients" class="pt-page pt-page-4" data-id="clients">
<p>some html css js items</p>
</section>
<section id="contact" class="pt-page pt-page-5" data-id="contact">
<p>some html css js items</p>
</section>
</body>
<style>
.pt-page {
width: 100%;
height: 0;
position: absolute;
opacity: 0;
top: auto;
left: 0;
display: flex;
min-height:620vh;
background-color: #fff;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.signle-layout{
background: #f3f3f3;
min-height: fit-content !important;
}
</style>I have single page website. Some of these pages are different sizes. And it is always based on the class with the highest height, even if I fix it, it still does not improve. By the way, I show each section as if it is a different page with transition. **When I open an additional class in each page and make the min-height with !importan part fit-content or write the size accordingly, I still see the background body part. You can see the example in the picture. always sets the section size based on the largest part. https://i.stack.imgur.com/2tiTs.jpg
You haven't defined properties for section,
Please refer to these properties in your code.
But you have to specify the height for the largest section block.
body{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
section{
height:300px;
background:#AAAAAA;
color:Black;
display:flex;
justify-content:center;
align-items:center;
width:300px;
}
section p{
font-size:2rem;
font-weight:bold;
}<body>
<section>
<p>Section 1</p>
</section>
<br>
<section>
<p>Section 2</p>
</section>
<br>
<section>
<p>Section 3</p>
</section>
<br>
<section>
<p>Section 4</p>
</section>
<br>
</body>