Tema: Altura 100% pero quitando 40px
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 09/04/2012, 21:40
tapuntdesign
 
Fecha de Ingreso: julio-2011
Mensajes: 83
Antigüedad: 12 años, 10 meses
Puntos: 24
Respuesta: Altura 100% pero quitando 40px
Cita:
Iniciado por emprear Ver Mensaje
Esto te puede servir
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7.  
  8. <style type="text/css">
  9. /*<![CDATA[*/
  10.  
  11. /* estilos */ 
  12.  
  13. html, body {
  14. height: 100%;
  15. border: none;
  16. padding: 0;
  17. margin: 0;
  18. }
  19.  
  20. #head{
  21. height: 40px;
  22. width: 100%;
  23. position: absolute;
  24. background-color: #ccc;
  25. z-index: 999;
  26. }
  27.  
  28. #box {
  29. position: absolute;
  30. top:0;
  31. left: 0;
  32. height: 100%;
  33. width: 100%;
  34. padding-top: 40px;
  35. box-sizing:border-box;
  36. -moz-box-sizing:border-box; /* Firefox */
  37. -webkit-box-sizing:border-box; /* Safari */
  38. background-color: lime;
  39. }
  40.  
  41. /*]]>*/
  42. </style>
  43. </head>
  44. <body>
  45. <div id="box">Altura: lo que queda de pantalla</div>
  46. <div id="head">tiene 40px de alto</div>
  47. </body>
  48. </html>

Con la propiedad box-sizing integrás el padding(top) de 40px en el alto evitando que se sumen al 100%, el z-index no es imprescindible si mantenes ese orden, pero no está demás ponerlo

SAludos
Y con box-sizing y border-box puedes crear un borde superior de 40px que se reste al tamaño total.