Foros del Web » Creando para Internet » CSS »

Utilizar Height 100% para el contenido de la web

Estas en el tema de Utilizar Height 100% para el contenido de la web en el foro de CSS en Foros del Web. Hola, he consultado bastantes cosas en este foro, pero nunca he creado un post. Primero que todo, saludos. Les comento que ya me he roto ...
  #1 (permalink)  
Antiguo 19/08/2011, 19:54
Avatar de adrianespasa  
Fecha de Ingreso: abril-2007
Mensajes: 27
Antigüedad: 9 años, 8 meses
Puntos: 0
Pregunta Utilizar Height 100% para el contenido de la web

Hola, he consultado bastantes cosas en este foro, pero nunca he creado un post.
Primero que todo, saludos.

Les comento que ya me he roto la cabeza googleando para solucionar el problema, pero las soluciones que he encontrado, no me han servido de mucho.

Tengo 2 consultas diferentes, se asemejan mucho, pero utilizan diferentes estilos.css

La primera:

es la de intentar dejar las columnas equilibradas de la web (con esto hablo del sidebar izquierdo con el contenido).

Para ser mas preciso, ver imagen:



Ya he probado con colocarle a la caja del medio, y la caja contenedora height:100%, pero no me lo toma.

Este es el codigo html:
Código:
<body>
<div id="pantalla">
  <div id="cuerpo_centro">
      <div id="cuerpo">
    <div id="left">
      <div id="left_top"></div>
          <div id="left_midlle">
            <div class="texto_contacto" id="left_middle_contacto_foto"></div>
          <div id="left_bottom"></div>
        </div>
        <div id="right">
          <div id="right_botonera">
            <div id="right_botonera_left"></div>
            <div id="right_botonera_midlle">
            </div>
            <div id="right_botonera_right"></div>
          </div>
          <div id="right_logo"></div>
          <div id="right_contenido">
          </div>
        </div>
      </div>
  </div>
</div>
</body>
Y este el CSS:
Código:

body{
    background:#000;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#131cc5;
    font-size:14px;
    padding:0px;
    margin:0px;
    height:auto;
    }
    
html{
    height:auto;}
    


#pantalla{
    position:relative;
    float:left;
    width:100%;
    height:auto;
    text-align:center;}
    


    
#cuerpo{
    width:100%;
    height:auto;
    position:absolute;
    float:left;
    background:#ebebeb;
    text-align:left;
    margin-top: 30px;
    }
    
#left{
    width:276px;
    height:100%;
    background:#101BEC;
    position:relative;
    float:left;
    margin-top:-15px;
    border-right: 3px solid #000;
    }
    
#left_top {
    background:url(images/left_top.png) no-repeat;
    width:276px;
    height:12px;
    position:relative;
    float:left;
    mar}
    
#left_midlle {
    background:url(images/left_midlle.png) repeat-x top;
    width: 276px;
    height:auto; (tambien lo probe con height:100%)
    position:relative;
    float:left;
}
        
    
#right{
    width:678px;
    height:auto;
    position:relative;
    float:right;
    background:#ebebeb url(images/cuerpo_top.png) no-repeat top right;
    margin-top:0px;
    }
    
    
#right_contenido{
    position:relative;
    float:left;
    width:603px;
    height:auto;
    margin-left: 17px;}
    
    
#right_contenido_middle_conteiner{
    background:#bebebe;
    width:589px;
    position:relative;
    float:left;
    height:auto;
    margin-left:5px;}
    
#right_contenido_middle{
    background:url(images/contenido_middle.png) repeat-x;
    width:589px;
    position:relative;
    float:left;
}
    
#right_contenido_middle_middle{
    background:url(images/contenido_middle.png) repeat-x;
    width:570px;
    height:230px;
    position:relative;
    float:left;
    margin-left:10px;}

__________________________________________________ ________

Segunda pregunta:

Aqui el problema pasa, con que deseo hacer que la div del contenido tenga contenido elastico, cosa que cuando se agrande el contenido interior, se agrande la caja. Intente hacerlo con las etiquetas height:auto, pero no hubo caso, me rompia toda la estructura:

Ver imagen:




Asi es como se deberia ver (aqui se ve bien, porque el contenido esta dentro del tamaño q soporta la caja):


El codigo CSS (solo lo relevante):

Código:
body{
	background:#000;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#b0b0b0;
	height:100%;}
	
html{
	height:100%;}
	


#pantalla{
	width:100%;
	height:100%;
	position:absolute;}
	
#cuerpo{
	width:922px;
	height:auto;
	position:relative;
	margin-left:auto;
	margin-right:auto;}
	
#cuerpo_centro{
	width:878px;
	height:100%;
	background:#b0b0b0 url(images/cuerpo_top.png) top left no-repeat;
	position:relative;
	margin-left:auto;
	margin-right:auto;}
	

	
#content{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:844px;
	height:390px;
	margin-top:30px;
}
#content_top{
	background:#b0b0b0 url(images/content_top.png) no-repeat top left;
	width:844px;
	height:19px;
	position:relative;
	float:left;
	text-align:left;
}
	
#content_middle{
	width:844px;
	height:auto;
	background:#b11a23;
	position:relative;
	float:left;}
#content_bottom{
	position:relative;
	float:left;
	width:844px;
	background:url(images/content_bottom.png);
	height:19px;}

#sidebar{
	background:#b0b0b0 url(images/sidebar.png) no-repeat;
	margin-left:auto;
	margin-right:auto;
	width:820px;
	height:36px;
	margin-bottom:0px;
	text-align:center;
	padding-top:8px;
	margin-top:20px;
}

#cuerpo_bottom{
	position:relative;
	width:878px;
	height:17px;
	bottom:0px;
	margin-left:auto;
	margin-right:auto;
	}
#cuerpo_bottom_left{
	background:url(images/cuerpo_left_bottom.png) no-repeat bottom left;
	width:17px;
	height:17px;
	position:relative;
	float:left;}
#cuerpo_bottom_right{
	background:url(images/cuerpo_right_bottom.png) no-repeat right;
	width:17px;
	height:17px;
	position:relative;
	float:right;}
Codigo HTML:

Código:
<body>
<div id="pantalla">
  <div id="cuerpo">
    <div id="cuerpo_centro">
      <div id="logo"></div>
      <div id="letras_editor"></div>
      <div id="menu">
        <div id="menu_left"></div>
        <div id="menu_middle">
         </div>
        <div id="menu_right"></div>
      </div>
      <div id="content">
        <div id="content_top"></div>
        <div id="content_middle">
          
        </div>
        <div id="content_bottom"></div>
      </div>
      <div id="sidebar">Para mas informacion, contactar: [email protected]    Web: <a href="http://www.conexoweb.com">www.conexoweb.com</a></div>
      <div id="cuerpo_bottom">
        <div id="cuerpo_bottom_left"></div>
        <div id="cuerpo_bottom_right"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Porque creen que no funciona?

Gracias
  #2 (permalink)  
Antiguo 20/08/2011, 01:09
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 7 años, 10 meses
Puntos: 306
Respuesta: Utilizar Height 100% para el contenido de la web

Para la segunda consulta agregale al div padre overflow:hidden o auto.
Con respecto a la primera, busca en este foro que hay bastante de ello.
Por las dudas tambien te puedes fijar en:
http://araudi.net/ejemplos/3columnas.html
http://araudi.net/ejemplos/columnas_equilibradas.html
saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: 100, contenido, height, html, tamaño, fondo
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:40.