height:100% con margin-top y margin-bottom

Escoffie · #1 (**permalink**) 28/10/2007, 00:00

Hola a todos:

Lo que quiero es un div de 100% de alto, pero con márgenes arriba y abajo.
Si hago:

Código:

html, body { height:100% }
div#fulano{ height:100%; margin-top:100px; margin-bottom:80px; }

Lo que obtengo mide más del 100% (180px más alto) y aparecen los scrolls.
¿Alguna idea sobre cómo puedo resolverlo?

Saludos, y gracias.

PatomaS · #2 (**permalink**) 28/10/2007, 08:16

Hola

Si lo que quieres es que tenga 100% de alto más márgenes, es perfectamente normal que aparezcan las barras de desplazamiento.

Ahora si lo que quieres es que la capa más los márgenes ocupen 100%, simplemente reduce su altura.

Tu propia explicación suma más de 100%.

Creo que debes replantear el problema o revisar lo que quieres.

Felicidad

Escoffie · #3 (**permalink**) 28/10/2007, 09:45

Hola PatomaS:

Gracias por tu respuesta, pero no funcionaría para lo que necesito.

Verás: la solución que planteas funciona bien, siempre y cuando no mezcles unidades diferentes, es decir, sería correcto si yo hiciera height:90%; margin-top:7%; margin-bottom:3%; (la suma de todos los porcentajes es de 100%).

El problema es que yo necesito que esos márgenes tengan medidas concretas en píxeles.

De todos modos, gracias

¿Alguna otra idea? ¿Tal vez algo con Javascript?

¡Saludos!

Escoffie · #4 (**permalink**) 28/10/2007, 15:20

Hola.
Finalmente lo pude solucionar.
La solución la encontré aquí: http://andylangton.co.uk/articles/ja...ze-javascript/
Es Javascript, pero tiene mucha relación con el CSS.

Pongo el código completo, con HTML, Javascript y CSS para quien pudiera requerirlo.

Ha sido probado con IE7, FF2 y safari 3 para PC, en Windows Vista.
Si alguien pudiera probarlo en otros navegadores/plataformas y reportar errores, sería genial.

Con esto se logra un diseño de tipo:
CABECERA
--------------
CONTENIDO
--------------
PIE DE PAG

Donde contenido tiene una columna con anchura fija y tan alta como sea el espacio disponible entre cabecera y pie de pag.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
html, body {
    margin:0;
    padding:0;
    height:100%;
}
#lienzo {
    margin: auto;
    padding: 0px;
    height: 100%;
    width: 950px;
    background-color:#999;
}
#lienzo #cabecera {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
    color:#FFFFFF;
    background-color:#333333;
}
#lienzo #contenidoTexto {
    width:400px;
    background-color:#ccc;
    position:absolute;
    top:100px;
    overflow:auto;
}
#lienzo #piedepagina {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:80px;
    color:#FFFFFF;
    background-color:#333333;
}
h1, p {
    margin:0;
}
-->
</style>
<script type="text/ecmascript" language="javascript">
<!--
function resize(){
    var viewportwidth;
    var viewportheight;
    
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    
    if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerWidth;
      viewportheight = window.innerHeight;
    }
    
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
       viewportwidth = document.documentElement.clientWidth;
       viewportheight = document.documentElement.clientHeight;
    }
    
    // older versions of IE
    
    else
    {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
       viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    }
    // A la altura total se le resta 180px (100 de la cabecera y 80 del pie de página
    document.getElementById("contenidoTexto").style.height=viewportheight-180+"px";
}
window.onload=resize;
window.onresize=resize;
-->
</script>
</head>
<body>
<div id="lienzo">
  <div id="cabecera">Esta es la cabecera</div>
  <div id="contenidoTexto">
    <h1>Es un encabezado de nivel uno, pero que ancla o define a H1#contenidoTitulo</h1>
    <h2>Este es un encabezado de nivel dos, que debe ampliar un poco m&aacute;s la informaci&oacute;n sobre la secci&oacute;n</h2>
    <p>Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Ullamco laboris nisi sunt in culpa ut aliquip ex ea commodo consequat. Cupidatat non proident, excepteur sint occaecat in reprehenderit in voluptate. Mollit anim id est laborum.</p>
    <h3>Encabezado de nivel tres: </h3>
    <ul>
      <li>Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. </li>
      <li>Ut aliquip ex ea commodo consequat. </li>
      <li>In reprehenderit in voluptate.</li>
    </ul>
    <p class="colorNombrecolor">Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi in reprehenderit in voluptate velit esse cillum dolore.</p>
    <h1>Es un encabezado de nivel uno, pero que ancla o define a H1#contenidoTitulo</h1>
    <h2>Este es un encabezado de nivel dos, que debe ampliar un poco m&aacute;s la informaci&oacute;n sobre la secci&oacute;n</h2>
    <p>Duis aute irure dolor sed do eiusmod tempor incididunt quis nostrud exercitation. Ullamco laboris nisi sunt in culpa ut aliquip ex ea commodo consequat. Cupidatat non proident, excepteur sint occaecat in reprehenderit in voluptate. Mollit anim id est laborum.</p>
    <h3>Encabezado de nivel tres: </h3>
    <ul>
      <li>Duis aute irure dolor velit esse cillum dolore consectetur adipisicing elit. </li>
      <li>Ut aliquip ex ea commodo consequat. </li>
      <li>In reprehenderit in voluptate.</li>
    </ul>
    <p class="colorNombrecolor">Ut labore et dolore magna aliqua. Ut aliquip ex ea commodo consequat. Ullamco laboris nisi in reprehenderit in voluptate velit esse cillum dolore.</p>
  </div>
  <div id="piedepagina">Este es el pie de página</div>
</div>
</body>
</html>

Saludos, y espero que les sea útil.

PatomaS · #5 (**permalink**) 28/10/2007, 20:55

Hola

Me alegra que hayas encontrado la solución al problema.

Sin embargo, quiero puntualizar un poco lo que nos presentas.

Tu pedías algo que fuera más alto del 100% de altura y no tuviera barras de desplazamiento. Lo cual no es posible a menos que juegues con el overflow, lo que lo volvería a dejar en 100% de altura.

Lo que nos presentas en el código, en una página con 100% de altura y tres zonas verticales diferentes, que no es lo mismo que pedías.

Para lograr lo que has hecho, basta con colocar tres capas posicionadas en la pantalla. Ciertamente el aporte de javascript para mantener las capas en su posición ayuda en ciertos navegadores.

Sin embargo, a lo que voy, es que la explicación del problema no se correspondía con lo que has hecho. Bueno, podemos llamar a la capa superior e inferior márgenes, pero tú mismo las llamas diferente en el código (cabecera y pie).

;)

Bueno, lo importante es que lograste resolver el problema y además mediante investigación y unión de elementos, lo que es muy importante.

Felicidad

Escoffie · #6 (**permalink**) 29/10/2007, 09:34

Hola PatomaS:

Tienes razón, en mi afán de ser concreto omití parte del planteamiento del problema.
La idea de los márgenes arriba y abajo era que con ellos pudiera librar los elementos "cabecera" y "piedepagina".
Por cierto, con tres capas posicionadas en la pantalla no logré el efecto visual que necesitaba.
Saludos y muchas gracias