Foros del Web » Creando para Internet » HTML »

Div con height auto

Estas en el tema de Div con height auto en el foro de HTML en Foros del Web. Hola a [email protected], estoy intentando maquetar algo simple, pero no consigo hacerlo de forma correcta con xhtml stritct. Es algo "simple". Un div en la ...
  #1 (permalink)  
Antiguo 28/09/2008, 12:56
 
Fecha de Ingreso: septiembre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Div con height auto

Hola a [email protected],

estoy intentando maquetar algo simple, pero no consigo hacerlo de forma correcta con xhtml stritct.

Es algo "simple". Un div en la parte superior con un height fijo (32px) para un menú, y otros 2 div debajo (50% width cada uno) que ocupen el resto del documento. El problema es que si a estos 2 div les pongo height:100% sólo funciona como quiero en el ie7, en el resto de navegadores me coge 100%+32px y me aparecen los scrollbars.

¿Como puede conseguir el mismo resultado que con el ie7 en el resto de navegores (firefox, safari...)?

Espero que puedan ayudarme. Gracias!


Código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/strict" xml:lang="en" lang="en">
<head>
<title>Pruebas xhtml</title>
<style type="text/css">
* {
  border: 0px;
  margin:0;
  padding:0;
}

html, body {
min-width: 900px;
width:100%;
height:100%;
}

</style>
</head>
<body>
	<div style="height:32px; width:100%; border:1px solid black;">
               menu
        </div>
	<div style="position:absolute; top:32px; bottom:0px; left:0; width:50%; height:inherit; border:1px solid blue;">
			<object style="height:100%; width:100%; border:0px solid #000;" data="http://itext.ugent.be/library/com/lowagie/examples/objects/Phrases.pdf" type="application/pdf" standby="Prueba!!"></object>
	</div>
	<div style="position:absolute; overflow:auto; width:49%; top:32px; bottom:0px;  left:50%; height:inherit; border:0px solid red">
                   barra informacion
	</div>
</body>

Última edición por zaratundra; 28/09/2008 a las 13:13
  #2 (permalink)  
Antiguo 28/09/2008, 13:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div con height auto

¿Cómo van a ser esas cajas del 50% (fondo, bordes, etc.)?
¿Qué llevarán dentro? ¿lo que hay dentro debe ocupar todo es 100%-32px?

Te lo pregunto porque según cómo sean y qué lleven dentro, habrá una solución sencilla o no.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 28/09/2008, 13:07
 
Fecha de Ingreso: septiembre-2008
Mensajes: 2
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Div con height auto

Gracias por tu pronta respueta Mikmoro.

De los dos divs inferiores, el de la izquierda mostrará un elemento object, como se ve en el ejemplo, que podrá ser un pdf, una imagen, una pagina html, etc. La caja de la derecha mostrará información en una tabla de lo que hay en la caja izquierda. Esa tabla podrá ser tan alta como quiera, por ello el overflow a auto en esa caja.

En principio ninguna de las dos cajas tendra ni fondo, ni bordes, ni nada, sólo son usadas como contenedores.

Si, en un principio debe ocupar 100%-32px, aunque pueda que más adelante se le ponga un pie de pagina de otro tamaño fijo. Eso está por ver, pero en un principio 100%-32px. Lo que no me vale es calcular el height 100%-32 de forma estática en un javascript al cargar la página. El tamaño de esas cajas debe ser dinámico.

Última edición por zaratundra; 28/09/2008 a las 13:33
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:30.