Hacer que div tome el 100% de height de div contendor

serio_924 · #1 (**permalink**) 01/05/2014, 14:58

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;
}

iblancasa · #2 (**permalink**) 01/05/2014, 15:32

No termino de entender bien lo de "cuando haya poco contenido".

Aún así, cogiendo tu código y mirando en un navegador, entiendo que el "section" no ocupa el 100% del alto. Eso se soluciona poniendo: "height: 100%;" como propiedad dentro de "section" y de "#contenedor" (la capa que lo contiene también necesita tenerlo).

Un saludo.

serio_924 · #3 (**permalink**) 01/05/2014, 22:56

Gracias por contestar... Me refiero a que cuando existe mucho contenido (textos, muchas imagenes, etc) No hay problema con el section ya que este crecerá conforme al contenido y ocupará mas de el 100% de la pantalla.. Pero cuando el contenido es poco(digamos una sola linea de texto, o alejando el zoom de nuestro navegador todo lo posible) el contenedor y <section> solo ocuparan una parte de la pantalla, restando estética al sitio.

Supongo que lo ideal es declarar un min-height: 100%; en el <section>..... pero <section> no me toma el 100% del contenedor, si puedes( te lo agradecería) has un alejamiento de todo el zoom de tu navegador y verás a que me refiero.

pzin · #4 (**permalink**) 02/05/2014, 01:18

Bienvenido al foro.

No tengo muy claro si es un bug (que está reportado) o realmente sigue estrictamente la especificación:

Cita:

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

Entonces el problema es ese min-height, ya que no es un valor definido de forma explícita. Prueba a añadirle a ese contenedor:

Código CSS:

Ver originalheight: 1px;

Manteniendo la altura mínima, claro. Tal vez funcione. No puedo hacer pruebas ahora mismo. Pero en teoría debería.

serio_924 · #5 (**permalink**) 02/05/2014, 13:11

Gracias por responder pzin... he probado lo de height: 1px; lo he puesto en el div contenedor y cuando hay poco texto funciona correctamente, el <section> toma una altura del 100% respecto al div contenedor... El problema es cuando he puesto muchas lineas de texto dentro del <section> para hacerlo crecer y que ocupe más que el tamaño de pantalla, entonces el <section> crece más que el contenedor, el contenedor se queda con el tamaño de la pantalla y no crece más.

Nota: en el CSS en #contenedor{ } tenía declarado un overflow: hidden; (esto lo vi como recomendación para limpiar no usando un div con clear: both) y este me ocultaba el scroll del navegador.
Al final he usado un div con un clear antes de cerrar el contendor....

Pero el problema del tamaño del <section> sigue en pie.

iblancasa · #6 (**permalink**) 02/05/2014, 14:29

No termino de entender el problema.
Te pego mi código (en el que he integrado la hoja de estilos dentro del HTML) y varias capturas.
Captura 1 (normal)
Captura 2 (zoom alejado)
Captura 3 (zoom acercado)

Código:

<!DOCTYPE html>
<html>

    <head>
        <style>body, html{
height: 100%;
margin: 0;
}

#contenedor{
width: 985px;
min-height: 100%;
margin: 0 auto;
height: 100%;
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%;
height: 100%;
min-height: 100%;
padding: 2%;
background: rgb(200,130,200);
border-radius: 6px;
box-sizing: border-box;
}
        </style>

        <title>Maqueta1</title>
        <link rel="stylesheet" type="text/css" href="estilo.css" />

    </head>

    <body>

        <div id="contenedor">

            <section>

                <h1>Secci&oacute;n principal</h1>
                <p>
                PRueba prueba
                </p>

            </section>

        </div>

    </body>

</html>

Si el problema está solucionado, se arregla poniendo el "height" tanto a la capa que quieres hacerle el 100% como a la que lo contiene.

Un saludo.

serio_924 · #7 (**permalink**) 03/05/2014, 09:56

Gracias iblancasa, en verdad gracias por ayudar a personas como yo, con dudas y problemas.

He probado tu código y surge el problema que comento arriba, con la solución de pzin.. el cual es el siguiente: SI pongo un tamaño fijo al contenedor (100%) tomará el 100% de mi pantalla, eso es correcto, pero ¿que pasa si el contenido de <section> (Mucho texto, imágenes, etc.) crece más que el tamaño de la pantalla?

Resultado:
El <section> se desborda.. crece más que el contendedor, esto por que el contenedor tiene un tamaño fijo... Mi problema es que necesito que el contenedor tenga como mínimo el 100% de altura, y cuando exista mucho contenido en <section> crezca sin límites.

serio_924 · #8 (**permalink**) 03/05/2014, 10:00

Se me pasaba decirte iblancasa, el overflow: hidden; del CSS, cambialo a overflow:scroll;