Alex
quiero mostrar 1 página estática que contiene todo sin un desplazamiento
Traté de hacer que el relleno del cuerpo sea 0 y se desborde: oculto pero nada funcionó. También probé el encabezado de página a continuación y el código de la imagen de fondo tampoco funciona.
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
Si configura el cuerpo para que tenga un desbordamiento de oculto en css, no permitirá que el usuario se desplace hacia abajo en la página.
body {
overflow-y: hidden;
}
AugustoM
Vaya al elemento html raíz, puede diseñarlo para:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
El navegador interpretará esto como que el html usaría el 100% del espacio de ancho del dispositivo utilizable y ocultaría el resto.
usuario127091
Probablemente no quiera evitar el desplazamiento, sino hacer que los elementos de la página encajen en la pantalla para que no haya una barra de desplazamiento y aún así todo esté visible.
Para empezar, puede hacer que la clase .main (que solo contiene su pie de página) esté absolutamente posicionada en la parte inferior y continuar desde allí.
.main {
position: absolute;
bottom: 0;
width: 100%;
}
o, lo que prefiero, configure el contenedor para que sea un flexbox: ACTUALIZADO
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
-
Hola amigo, muchas gracias por tomarte el tiempo de responder y ayudarme, probé la primera solución y funciona muy bien en la página principal, pero hace que la otra parte superior de la página desaparezca, puedes ver la información. La segunda opción funciona muy bien, pero no se ajusta a todo y la pantalla tiene 2 mucho blanco debajo del pie de página. Estoy aplicando la segunda opción ahora, muchas gracias de nuevo.
– Alex
9 ago 2019 a las 21:45
-
No hay problema. Agregué a mi respuesta una solución para que pueda aplicar los estilos solo a la página principal.
– usuario127091
9 de agosto de 2019 a las 22:04
-
Hombre, fue un error tener ese contacto, lo acabo de quitar, ¿intentaré esta solución de todos modos? No quiero que se ponga en contacto. solo este pie de página clásico que tengo es genial
– Alex
9 de agosto de 2019 a las 22:11
-
Eché un vistazo a su página nuevamente y actualicé mi respuesta. Si reemplaza el código anterior con el que se encuentra después de ACTUALIZADO, ya no debería ver ningún espacio en blanco debajo del pie de página.
– usuario127091
10 de agosto de 2019 a las 0:06
-
Hola hombre, usé ese código de inicio así y funciona increíble, body.home .main { posición: absoluta; inferior: 0; ancho: 100%; } Hablando del pie de página, ¿sabes cómo puedo hacer esa línea en todo el ancho para poder separarlas como 2 partes? Lo intenté mucho, pero parece un poco complicado o mi cerebro está cerrado en ese momento 🙂
– Alex
10 de agosto de 2019 a las 0:24