Foros del Web » Creando para Internet » CSS »

2 columnas al 100% de altura sin scrollbar

Estas en el tema de 2 columnas al 100% de altura sin scrollbar en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/05/2008, 12:26
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
2 columnas al 100% de altura sin scrollbar

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
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por Saruman; 20/05/2008 a las 12:28 Razón: modificar el titulo que estaba mal escrito
  #2 (permalink)  
Antiguo 20/05/2008, 14:38
 
Fecha de Ingreso: mayo-2008
Mensajes: 4
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: 2 columnas al 100% de altura sin scrollbar

Estimado Saruman:

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

Saludos ---<[email protected]

<!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
  #3 (permalink)  
Antiguo 20/05/2008, 14:48
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Respuesta: 2 columnas al 100% de altura sin scrollbar

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.
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.

Última edición por Saruman; 20/05/2008 a las 14:53
  #4 (permalink)  
Antiguo 20/05/2008, 18:43
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: 2 columnas al 100% de altura sin scrollbar

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.
  #5 (permalink)  
Antiguo 21/05/2008, 08:20
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Respuesta: 2 columnas al 100% de altura sin scrollbar

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

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #6 (permalink)  
Antiguo 22/05/2008, 16:29
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Respuesta: 2 columnas al 100% de altura sin scrollbar

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
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #7 (permalink)  
Antiguo 22/05/2008, 17:10
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: 2 columnas al 100% de altura sin scrollbar

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.
  #8 (permalink)  
Antiguo 22/05/2008, 17:37
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 14 años, 6 meses
Puntos: 5
Respuesta: 2 columnas al 100% de altura sin scrollbar

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

Saludos y gracias nuevamente :)
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
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 13:30.