<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>Tengo un sitio web de una sola página. Algunas de estas páginas son de diferentes tamaños. Y siempre se basa en la clase con mayor altura, aunque lo arreglo, sigue sin mejorar. Por cierto, muestro cada sección como si fuera una página diferente con transición. ** Cuando abro una clase adicional en cada página y hago la altura mínima con !importan part fit-content o escribo el tamaño en consecuencia, todavía veo la parte del cuerpo de fondo. Puedes ver el ejemplo en la imagen. siempre establece el tamaño de la sección en función de la parte más grande. https://i.stack.imgur.com/2tiTs.jpg
No ha definido propiedades para la sección,
Consulte estas propiedades en su código.
Pero debe especificar la altura para el bloque de sección más grande.
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>