Foros del Web » Creando para Internet » CSS »

Ayuda con height al 100%

Estas en el tema de Ayuda con height al 100% en el foro de CSS en Foros del Web. hola que tal a todos!!! tengo un problemilla, no se mucho de css todavia pero estoy aprendiendo. el problema es que quiero poner 3 div ...
  #1 (permalink)  
Antiguo 26/04/2008, 11:02
Avatar de ajalex  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 0
Exclamación Ayuda con height al 100%

hola que tal a todos!!!

tengo un problemilla, no se mucho de css todavia pero estoy aprendiendo.

el problema es que quiero poner 3 div como columnas y un espacio de 15px entre cada una y en ese espacio pongo tro div que contiene un background de puntitos.

ahora. cuando en algun div lo hago mucho más largo que los otros quiero que los otros divs tanto las columnas como los separadores de puntitos se hagan al 100% automaticamente, ya he probado con height: 100%, min-height: 100%. etc... bueno aqui les dejo el codigo


html
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>title</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header" align="center">
top
  </div>
  
  <div id="printipal">
    <div id="block_left">
      <p>izquierdo </p>
    </div>
      <div id="separator_v"></div>
    <div id="block_center">Centro</div>
      <div id="separator_v"></div>
    <div id="block_right">Derecho</div>
  </div>
    <div class="clearfloat"></div>
  <div id="footer"></div>
</div>
</body>
</html> 
y este es el css

Código HTML:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
div{
min-height:100%;
}
#container {
min-height: 100%;
width: 100%;
margin: 0 auto;
}
* html #container {
height: 100%;
}
.clearfloat {
	clear:both;
}
#header {
	min-height: 100%;
	width: 100%;
	background-image: url(background_top.gif);
	height: 270px;
	background-repeat: repeat-x;
	border:solid 0px;
}
#footer {
	background-image: url(background_footer.gif);
	background-repeat: repeat-x;
	height: 73px;
}
#printipal {
	margin:0 auto 0 auto;
	width: 726px;
	border:solid 0px;
	height:100%;
}
#block_left, #block_right, #block_center {
	float: left;
	height: 100%;
	width: 232px;
}
#block_right_solo {
	float: left;
	height: 100%;
	width: 479px;
}
#separator_v {
	background-image: url(point_v.gif);
	background-repeat: repeat-y;
	float: left;
	width: 15px;
 	min-height:100%;
	height: auto !important;
	height:100%;	
}
espero puedan ayudarme gracias!!!
  #2 (permalink)  
Antiguo 26/04/2008, 12:08
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
Re: Ayuda con height al 100%

Una pregunta: ¿la anchura de tu web será fija, o será elástica y se adaptará a la pantalla?

Mikel.
  #3 (permalink)  
Antiguo 26/04/2008, 12:30
Avatar de ajalex  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 0
Re: Ayuda con height al 100%

mmm sería elastica.. se adaptará al contenido


en el div de header tengo un background de 70px de largo y de ancho al 100% y encima nu flash ahi es fijo

y en el footer igual un background de unos 73px de alto y de ancho al 100% de la pagina

y en el div de princial ahi tendré en el block_left, ultimas noticias unas 4 o 5 y abajo unas imagenes, etc..

hago pruebas yo agranando mis div de principal y el footer se agranda perfecto automaticamente, de eso no me quejo pero el problema son los div de separacion de cada div block.... quiero hacerlo como en se hacia con tablas y se agrandan automaticamente pero con divs y css no puedo

por cierto la pagina estará centrada para verse mejor a todas las resoluciones de pantalla y su ancho fijo es de 726 px algo asi

Última edición por ajalex; 26/04/2008 a las 12:35 Razón: olvide añadir algo
  #4 (permalink)  
Antiguo 26/04/2008, 13:24
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
Re: Ayuda con height al 100%

Cita:
Iniciado por ajalex Ver Mensaje
mmm sería elastica.. se adaptará al contenido

por cierto la pagina estará centrada para verse mejor a todas las resoluciones de pantalla y su ancho fijo es de 726 px algo asi
Me desconciertas, porque esto es una contradicción: o es elástica o el ancho es fijo a "726px o así".

Mikel.
  #5 (permalink)  
Antiguo 26/04/2008, 13:36
Avatar de ajalex  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 0
Exclamación Re: Ayuda con height al 100%

el ancho de de la pagina es fijo y lo largo es elastico
  #6 (permalink)  
Antiguo 26/04/2008, 16:55
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
Re: Ayuda con height al 100%

Ya me parecía a mi. Te había preguntado:

Cita:
Una pregunta: ¿la anchura de tu web será fija, o será elástica y se adaptará a la pantalla?
Bueno, te lo preguntaba porque si es de ancho fijo, la solución es sencillísima: en lugar de complicarte con un montón de código, haces una imagen con la composición que quieres tener (columna izquierda azul, banda de puntos columna central verde, banda de puntos y columna derecha naranja), o lo que sea, ya me entiendes, y la haces del ancho que quieres en tu página y de 2px de alto; la pones de fondo de tu contenedor principal del contenido y la repites en y (repeat-y).

De esa manera, crezca la parte que crezca, siempre todo crece al unísono.

No sé si me explico bien. Si no, me dices y te hago una muestra.

Mikel.
  #7 (permalink)  
Antiguo 28/04/2008, 14:39
Avatar de ajalex  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 4 meses
Puntos: 0
Re: Ayuda con height al 100%

hola, pues si te entendi y gracias, lo que hize fue eso, hize un contenedor ahi le meti de fondo la imagen de puntitos y repetead, y como tenia 3 xcolumnas salio perfecto y hay en secciones que solo tengo 2 columnas una mas ancha para el contenido ahi nadamas hize un div con fondo blanco asemejando al area donde no hay puntitos y listo...

Gracias!!!
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 11:05.