Foros del Web » Creando para Internet » CSS »

hacer que div ocupe todo el espacio, pero no el 100%

Estas en el tema de hacer que div ocupe todo el espacio, pero no el 100% en el foro de CSS en Foros del Web. Hola! A ver si se puede resolver esta cuestión: Tengo el siguiente código css: Código: #pagina {width:755px; margin:auto; } #encabezado {width:744px; height:110px; float: left; border: ...
  #1 (permalink)  
Antiguo 17/07/2011, 06:32
 
Fecha de Ingreso: septiembre-2009
Mensajes: 16
Antigüedad: 7 años, 6 meses
Puntos: 0
hacer que div ocupe todo el espacio, pero no el 100%

Hola!

A ver si se puede resolver esta cuestión:

Tengo el siguiente código css:
Código:
#pagina {width:755px; margin:auto; }
	#encabezado {width:744px; height:110px; float: left; border: solid 5px #FDF4D5;}
	#cuadro {}
		#botones {width:120px;  float: left; margin-top: 5px; margin-right:5px; margin-bottom:5px; }
			.boton {width:110px; height:34px; clear: left; margin:5px; padding-top:3px}
		#cuerpo {width:619px; border: solid 5px #FDF4D5; float: left; margin-top:5px; margin-bottom:5px; }
	#pie { width:744px; border: solid 5px #FDF4D5; clear:both; margin-top:0px}
Y html:

Código:
<div id="pagina">
	<div id="encabezado" class="curved"></div>
	<div id="cuadro">
		<div id="botones" class="tb curved">
		  <div class="boton"> </div>
		  <div class="boton"></div>
		  <div class="boton"></div>
		</div>
		<div id="cuerpo" class="curved"></div>
	</div>
	<div id="pie" class="curved"></div>
</div>
Necesito que div #botones tenga todo el alto posible. Probé con en atributo height=100% añadiéndolo también a html y a body y el resto de etiquetas padre, pero como #botones empieza por debajo de #encabezado y termina antes que #pie, pero toma como 100% toda la página, el resultado era que tenia ciento y pico píxeles de más, que son la altura de #encabezado y #pie.

¿Se os ocurre alguna forma de conseguirlo?

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 17/07/2011, 16:03
 
Fecha de Ingreso: septiembre-2009
Mensajes: 16
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: hacer que div ocupe todo el espacio, pero no el 100%

Hola, vuelvo a ser yo.
Parece que no hay solución obvia al menos.

Otra manera de que quedara bonito sería hacer que #botones tuviera la misma altura que #cuerpo que no la tiene definida y crece según el contenido que tiene, y que es por lo general más alta que #botones. ¿Es eso posible?

Gracias
  #3 (permalink)  
Antiguo 17/07/2011, 16:53
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: hacer que div ocupe todo el espacio, pero no el 100%

Tiene solución, pero no se la veo tal como lo planteas tu.
Te planteo una forma que creo que cumple con todo lo que necesitas.

El html sería algo así
Código:
<body>
<div id="wrapper">
  <div id="pagina">
  	  <div id="encabezado">esto es el encabezado</div>
      <div id="cuerpo">esto es el cuerpo </div>
   	  <div id="botones">
      <div class="boton">boton1</div>
      <div class="boton">boton2</div>
      </div>
  </div>
</div>
</body>
El css:
Código:
#wrapper {
    background-color: #CCCCCC;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#botones {
    background-color: #00FF33;
    height: 100%;
    width: 120px;
	}
#pagina {
    background-color: Red;
    height: 100%;
    margin:auto;
    position: relative;
    width: 755px;
	top:0px;
}
#encabezado {
    border: 5px solid #FDF4D5;
    float: left;
    height: 110px;
    width: 744px;
	background-color:#00FF66;
}

.boton {
width:110px; 
height:34px; 
clear: left; 
margin:5px; 
padding-top:3px
}

#cuerpo {
position:relative;
width:619px; 
border: solid 5px #FDF4D5; 
float: right; 
margin-top:5px; 
margin-bottom:5px;
clear:right; 
}
He puesto colores chillones, que a mi me va bien para ordenar las capas.

Espero que te sirva.

Etiquetas: espacio, todo
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 12:47.