Altura 100% pero quitando 40px

shekel · #1 (**permalink**) 07/04/2012, 07:06

Tengo 2 div, el primero ocupa todo el ancho del navegador y 40 pixeles de altura, y el segundo quiero que ocupe el resto de la altura del navegador..

Estoy usando este codigo css para la segunda caja

Código CSS:

Ver originalposition:absolute;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    _height:100%;

¿ Hay algo parecido a "height: 100%-40px;" ?

kike2lucas · #2 (**permalink**) 07/04/2012, 08:00

margin-top: 40px;

¿no?
O viendo que es de posición absoluta, directamente:

top: 40px;

shekel · #3 (**permalink**) 07/04/2012, 08:13

Cita:

Iniciado por kike2lucas

margin-top: 40px;

¿no?
O viendo que es de posición absoluta, directamente:

top: 40px;

Si pero entonces me lo desplaza hacia abajo y el div es como si tuviese 110% de altura.. puedo hacer scroll

Lo que quiero es quitar 40 pixeles al 100% de la pagina

kseso? · #4 (**permalink**) 07/04/2012, 08:20

¿Y cuál es su estructura html?
Son dos cajas hermanas, hay un padre que las contenga o el header está dentro de la que necesita al 100%?

El css implicado dependerá de cuál sea el marcado html.

Pero normalmente se resuelve utilizando valores negativos en el margen inferior y evitando la posición absoluta por los problemas (a futuro) derivados de ella.

shekel · #5 (**permalink**) 07/04/2012, 08:25

Cita:

Iniciado por kseso?

¿Y cuál es su estructura html?
Son dos cajas hermanas, hay un padre que las contenga o el header está dentro de la que necesita al 100%?

El css implicado dependerá de cuál sea el marcado html.

Pero normalmente se resuelve utilizando valores negativos en el margen inferior y evitando la posición absoluta por los problemas (a futuro) derivados de ella.

Estan por separado...

<div id="head">tiene 40px de alto</div>
<div id="box">Altura: lo que queda de pantalla</div>

Tengo que meterlos dentro de una padre?

emprear · #6 (**permalink**) 09/04/2012, 19:22

Esto te puede servir

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
 
html, body {
height: 100%;
border: none;
padding: 0;
margin: 0;
}
 
#head{
height: 40px;
width: 100%;
position: absolute;
background-color: #ccc;
z-index: 999;
}
 
#box {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
padding-top: 40px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
background-color: lime;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="box">Altura: lo que queda de pantalla</div>
<div id="head">tiene 40px de alto</div>
</body>
</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

tapuntdesign · #7 (**permalink**) 09/04/2012, 21:40

Cita:

Iniciado por emprear

Esto te puede servir

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
 
html, body {
height: 100%;
border: none;
padding: 0;
margin: 0;
}
 
#head{
height: 40px;
width: 100%;
position: absolute;
background-color: #ccc;
z-index: 999;
}
 
#box {
position: absolute;
top:0;
left: 0;
height: 100%;
width: 100%;
padding-top: 40px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
background-color: lime;
}
 
/*]]>*/
</style>
</head>
<body>
<div id="box">Altura: lo que queda de pantalla</div>
<div id="head">tiene 40px de alto</div>
</body>
</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.