2 columnas al 100% de altura sin scrollbar

Saruman · #1 (**permalink**) 20/05/2008, 11:26

Buenas.
Estoy tratando de ajustar el siguiente código para que me genere un header y dos columnas: una para el menu y la otra para el contenido. Resulta que si lo hace PERO el header está afectando la altura del contenido y el menu ya que sale el scrollbar. Le había colocado overflow:hidden al body pero pienso yo que no es lo más óptimo y además, que en opera le vale, ya que si hago scroll con la rueda del mouse, este se ejecuta y me hace scroll aunque no se vea.

esto es lo que tengo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
html, body {
    height: 100%;
}
html, body {
    behavior: url(resources/htc/hover.htc);
    background-color:#FFFFFF;
}
#wrap {
    margin:0 auto;
    width:100%;
    height: 100%;
}
#header {
    height:66px;
    background-color:#999999;
    width:100%;
}
#main {
    background:#9c9;
    float:left;
    width:185px;
    height:100%;
}
#sidebar {
    background:#99c;
    width:100%;
    height:100%;
}
</style>

</head>

<body>

<div id="wrap">
    <div id="header">header</div>
    <div id="main">menu</div>
    <div id="sidebar">content</div>
</div>

</body>
</html>

Solo me falta que el menu y el contenido me queden bien. Habrá alguna forma de arreglar el header para que se mantenga y no "dañe" el resto??

Les agradesco cualquier ayuda o comentario.

Saludos

abiza · #2 (**permalink**) 20/05/2008, 13:38

Estimado Saruman:

Aqui te pongo las modificaciones que hice.
Espero haberte entendido bien y que sea esto lo que deseas

Saludos ---<--@

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
html, body {
behavior: url(resources/htc/hover.htc);
background-color:#FFFFFF;
}
#wrap {
margin:0 auto;
width:100%;
height: 100%;
}
#header {
width:100%;
height:20%;
background-color:#999999;

}
#main {
width:24%;
border: 0px;
height: 80%;
background:#9c9;
float:left;

}
#sidebar {
width:76%;
height: 80%;
background:#99c;
float: left;
}
</style>

</head>

<body>

<div id="wrap">
<div id="header">header</div>
<div id="main">menu</div>
<div id="sidebar">content</div>
</div>

</body>
</html>Solo me falta que el

Saruman · #3 (**permalink**) 20/05/2008, 13:48

Gracias por responder.
Bueno, ya yo había intentado esta forma, de ponerle los height's en %

Lo que sucede es que el header va a tener una imagen de bg pero si esta en porcentaje eso afectara un poco porque no podre establecerle la altura exacta y además, esta altura se verá afectada en las diferentes resoluciones que existan... ese es un problema bien grande!

Voy a seguir investigando a ver,

Saludos y gracias nuevamente.

Mikmoro · #4 (**permalink**) 20/05/2008, 17:43

A ver si te sirve esta solución:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>2 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
html, body {
behavior: url(resources/htc/hover.htc);
background-color:#FFFFFF;
}
#wrap {
margin:0 auto;
width:100%;
height: 100%;
}
#header {
height:66px;
background-color:#999999;
width:100%;
position: absolute;
top 0px; left: 0px;
}
#main {
background:#9c9;
float:left;
width:185px;
height:100%;
}
#sidebar {
background:#99c;
width:100%;
height:100%;
}
.relleno {height: 70px;}
</style>

</head>

<body>

<div id="wrap">
<div id="header">header</div>
<div id="main"><div class="relleno"></div>menu</div>
<div id="sidebar"><div class="relleno"></div>content</div>
</div>

</body>
</html>

Mikel.

Saruman · #5 (**permalink**) 21/05/2008, 07:20

Gracias Mikmoro.
Es exactamente lo que quería. Así puedo controlar el alto del header a mi gusto y no en %.
Saludos y cualquier cosa estamos a la orden XD

Saruman · #6 (**permalink**) 22/05/2008, 15:29

Hola de nuevo.
Ahora tengo otro prblemita: no se porque en IE6 y IE7 sale un espaciado como de 4px entre menu y content. En los otros navegadores funciona perfectamente, a ver si por favor alguien me puede ayudar. Les dejo el código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
background-color:#FFFFFF;
}
#wrap {
margin:0 auto;
width:100%;
height: 100%;
}
#header {
height:66px;
background-color:#999999;
width:100%;
position: absolute;
top:0px; left: 0px;
}
#main {
background:#9c9;
float:left;
width:185px;
height:100%;
}
#sidebar {
background:#99c;
display:block;
height:100%;
}
.relleno {
    height: 70px;
}
</style>

</head>

<body>

<div id="wrap">
<div id="header">header</div>
<div id="main"><div class="relleno"></div>menu</div>
<div id="sidebar"><div class="relleno"></div>content</div>
</div>

</body>
</html>

PD. Mikmoro: con lo que me habias ayudado en los post anteriores había un problema tambien en IE6 y 7 pero ya lo arreglé, es en la clase "slidebar".

Gracias

Mikmoro · #7 (**permalink**) 22/05/2008, 16:10

Hay una manera de solucionarlo y que te quede idéntico en FF, IE6 e IE7:

#header {
height:66px;
background-color:#999999;
width:100%;
position: absolute;
top:0px; left: 0px;
z-index:1;
}
#main {
background:#9c9;
float:left;
width:185px;
height:100%;
position: absolute;
z-index:0;
}
#sidebar {
background:#99c;
height:100%;
padding-left: 185px;
}

¿Por qué ocurre eso? Ni santa idea, la verdad, pero como tantas otras cosas de Explorer, o más bien digamos de Micro$oft.

Ya he visto lo que me decías del error: que no debía tener un width de 100%. Claro. Qué despiste. No obstante, el display block no lo necesitas, porque un div ya es un elemento de bloque y ese display es el que tiene si no se indica lo contrario.

Mikel.

Saruman · #8 (**permalink**) 22/05/2008, 16:37

Cool, gracias man.
Muy agradecido por tu ayuda....

Saludos y gracias nuevamente :)