Un saludo a todos!.. De antemano gracias por tomarse el tiempo de ayudar.
Tengo un problema con mi maquetación web, el cual es el siguiente:
Tengo un
div llamado
contenedor y
dentro un
<section> que al final de cuentas viene siendo otro div.
El problema es que no logro que este tome un height de 100%, cuando hay poco contenido dentro de este.
Necesito que <section> tome el 100% de altura del div "contenedor" adaptandose a la altura de la pantalla cuando haya poco contenido o cuando hacemos un alejamiento del zoom de nuestro navegador, pero no logro hacerlo.
Nota: Sin la etiqueta <!DOCTYPE html> mi código funciona a la perfección.
con el <!DOCTYPE html> no logro que tome el tamaño requerido.
Mi código HTML es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Maqueta1</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="contenedor">
<section>
<h1>Sección principal</h1>
<p>
Mi maqueta HTML5 con CSS3, Mi maqueta HTML5 con CSS3.
</p>
</section>
</div>
</body>
</html>
El CSS es el siguiente
body, html{
height: 100%;
margin: 0;
}
#contenedor{
width: 985px;
min-height: 100%;
margin: 0 auto;
background: rgb(230, 236, 236);
box-shadow: 0px 0px 20px black;
border-radius: 6px;
box-sizing: border-box;
overflow: hidden;
}
section{
float: left;
width: 80%;
min-height: 100%;
padding: 2%;
background: rgb(200,130,200);
border-radius: 6px;
box-sizing: border-box;
}