Foros del Web » Creando para Internet » CSS »

Sidebar fixed alto 100% - contenido expandible

Estas en el tema de Sidebar fixed alto 100% - contenido expandible en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/06/2010, 13:52
 
Fecha de Ingreso: octubre-2004
Ubicación: Uruguay
Mensajes: 386
Antigüedad: 13 años, 2 meses
Puntos: 4
Sidebar fixed alto 100% - contenido expandible

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?
  #2 (permalink)  
Antiguo 01/07/2010, 07:05
 
Fecha de Ingreso: octubre-2004
Ubicación: Uruguay
Mensajes: 386
Antigüedad: 13 años, 2 meses
Puntos: 4
Respuesta: Sidebar fixed alto 100% - contenido expandible

nadie que pueda ayudar?
  #3 (permalink)  
Antiguo 01/07/2010, 07:20
 
Fecha de Ingreso: octubre-2004
Ubicación: Uruguay
Mensajes: 386
Antigüedad: 13 años, 2 meses
Puntos: 4
Respuesta: Sidebar fixed alto 100% - contenido expandible

#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 .-
  #4 (permalink)  
Antiguo 01/07/2010, 11:30
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Sidebar fixed alto 100% - contenido expandible

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
  #5 (permalink)  
Antiguo 28/11/2010, 15:25
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Sidebar fixed alto 100% - contenido expandible

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?
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!
  #6 (permalink)  
Antiguo 28/11/2010, 15:58
Avatar de Anya82
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: tij.bc.mx
Mensajes: 1.269
Antigüedad: 10 años
Puntos: 196
Respuesta: Sidebar fixed alto 100% - contenido expandible

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

Código CSS:
Ver original
  1. html{height: 100%;}
  2.  
  3. body{width:970px;
  4.     border:3px black solid;}
  5.  
  6. #contenido{
  7.     width:970px;
  8.     background-color:white;
  9.     border: 3px red solid;
  10.     margin-bottom:0;
  11.     height:100%;
  12.     padding-bottom:0;
  13.     min-height:200px;
  14. }
  15.  
  16. #menu{
  17.     width:100%;
  18.     height:100px;
  19.     border: 3px cyan solid;
  20.     background-color: blue;
  21. }
  22.  
  23. #sidebar{
  24.     float:left;
  25.     width: 150px;
  26.     height:100%;
  27.     min-height:50px;
  28.     margin-bottom:0;
  29.     background-color: gray;
  30.     border: 3px green solid;
  31. }
  32.  
  33. #main{
  34.     border: 4px orange solid;
  35.     height:100%;
  36.     min-height:100px;
  37.     margin-bottom:0;
  38. }

Código HTML:
Ver original
  1.     <div id="contenido">
  2.         <div id="menu">
  3.             <h1>Titulo</h1>
  4.         </div>
  5.         <div id="sidebar">
  6.             <p>sidebar</p>
  7.         </div>
  8.         <div id="main">
  9.             <p>aqui va el contenido principal</p>
  10.         </div>
  11.     </div>
  12.    
  13. </body>
__________________
¿Ya se enteraron? Grandes y maravillosas noticias... ¡Google no te cobra por búsqueda!

Etiquetas: alto, contenido, expandible, fixed, sidebar
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 03:11.