Sidebar fixed alto 100% - contenido expandible

gerazmv · #1 (**permalink**) 30/06/2010, 12:52

Hola gente.-
necesitaria crear lo de esta imagen

Uploaded with ImageShack.us
a ver si alguien me puede dar una ayuda .-

el sidebar debe de ser de 200px de ancho y de alto 0px 100% .- ( de arriba abajo ) .-

el contenido debe de ser expandible y no importa que este hasta abajo del todo.-

alguien me da una ayuda?

gerazmv · #2 (**permalink**) 01/07/2010, 06:05

nadie que pueda ayudar?

gerazmv · #3 (**permalink**) 01/07/2010, 06:20

#page { background-color:#333333; border-top:4px solid #F82B7D; min-width:600px; position:relative; }
#sidebar { background-color:#1F1F1F; border-right:1px solid #828282; min-height:400px; float:left; width: 14em; height:100%; min-height:500px; }
#contenido { margin: 0 20px 0 15em; color:#FFFFFF; }

hasta aqui ya lo tengo casi todo solucionado.- pero el div del sidebar no me va hasta abajo del todo .-

deirdre · #4 (**permalink**) 01/07/2010, 10:30

Hola gerazmv

La información que pones no es completa, pero mira si esto te ayuda a encontrar la solución:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Estructura</title>
<style type="text/css">
html, body {
	height: 100%
}
* {
	margin: 0;
	padding: 0;
}
#page { 
	background-color: #333333; 
	border-top: 4px solid #F82B7D; 
	height: 100%; 
	min-width: 600px; 
	position: relative; 
}
#sidebar { 
	background-color: #1F1F1F; 
	border-right: 1px solid #828282; 
	min-height: 400px; 
	float: left; 
	width: 200px; 
	height: 100%; 
	min-height:500px; 
} 
#contenido { 
	margin: 0 20px 0 15em; 
	color:#FFFFFF; 
}
</style>
</head>

<body>
<div id="page">
	<div id="contenido"></div>	
	<div id="sidebar"></div>
</div>
</body>

</html>

O bien pon la totalidad de tu código

Bye

Anya82 · #5 (**permalink**) 28/11/2010, 15:25

Hola a todos, hay alguna otra manera de solucionarlo? he intentado hacer lo que dicen: definir height al 100%, margin-bottom:0; y min-height al tamaño de su contenedor, pero no funciona.

Hay alguna otra manera de hacerlo?

Anya82 · #6 (**permalink**) 28/11/2010, 15:58

Aqui agrego el codigo como lo estoy manejando en una prueba para despues aplicarlo a mi proyecto real:

Código CSS:

Ver originalhtml{height: 100%;}
 
body{width:970px;
    border:3px black solid;}
 
#contenido{
    width:970px;
    background-color:white;
    border: 3px red solid;
    margin-bottom:0;
    height:100%;
    padding-bottom:0;
    min-height:200px;
}
 
#menu{
    width:100%;
    height:100px;
    border: 3px cyan solid;
    background-color: blue;
}
 
#sidebar{
    float:left;
    width: 150px;
    height:100%;
    min-height:50px;
    margin-bottom:0;
    background-color: gray;
    border: 3px green solid;
}
 
#main{
    border: 4px orange solid;
    height:100%;
    min-height:100px;
    margin-bottom:0;
}

Código HTML:

Ver original<body>
    <div id="contenido">
        <div id="menu">
            <h1>Titulo</h1>
        </div>
        <div id="sidebar">
            <p>sidebar</p>
        </div>
        <div id="main">
            <p>aqui va el contenido principal</p>
        </div>
    </div>
    
</body>