[SOLUCIONADO] Estructura html5

german_1441 · #1 (**permalink**) 10/03/2016, 10:35

Hola amigos,
disculpen mi ignorancia, pero no logro entender porque pasa esto,
tengo mi código html5 de ésta forma:

Código HTML:

Ver original<body>
    <header>
        <h1>BIENVENIDOS!!!</h1>
    </header>
    <section>
        <article>
            <div class="construccion" align="center"><img src="IMAGEN.jpg" alt="MI IMAGEN"></div>
        </article>
    </section>
</body>

Y tengo estos estilos:

Código CSS:

Ver originalbody{
    background: -webkit-linear-gradient(#777474, #A6A2A2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#777474, #A6A2A2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#777474, #A6A2A2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#777474, #A6A2A2); /* Standard syntax */
}
 
header{ 
    text-align: center;
}

Pero el degradado de mi página se pierde a la mitad... como si el body solo abarcara la mitad de mi página, y no entiendo porque

Cabe mencionar que estoy utilizando bootstrap, pero no encuentro en los estilos de la libreria algo q pueda estar causando esto...

Alguien sabe como puedo hacer que mi degradado no se pierda?
o porque es que pasa esto?
Saludos!

juanito1712 · #2 (**permalink**) 10/03/2016, 10:53

(Suponiendo que uses chrome)
Abre las herramientas para desarrolladores [F12] y en el html selecciona la etiqueta body, verás que se resalta en la página, si no se resalta toda la página tendrás la certeza de que body no abarca la página completa, entonces...

html,body{height:100%;}

german_1441 · #3 (**permalink**) 10/03/2016, 11:05

Amigo gracias por la respuesta!!!
Si, en efecto, no abarca el 100%, pero porq pasa esto?
no deberia ocupar todo el espacio?
Definiendo el height a 100% afecta algo en lo responsivo?
Ya lo defini y en efecto, ya abarca la mayoria de mi pagina, PERO, aparece el scroll vertical y hasta abajo de nuevo el fondo se pierde
Disculpen la molestia, pero soy muy nuevo en esto de los estilos

german_1441 · #4 (**permalink**) 10/03/2016, 11:09

Amigo ya lo resolvi...
no defini la altura al 100 para html y body
solo lo hice para html
Aun aun no entiendo porq al definirlo sobre body no funciona x.x