Hola a tod@s,
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>