No consigo que el div se expanda al 100% de la altura

pangeacb · #1 (**permalink**) 29/05/2009, 09:08

En una página que tiene un menú float:left, y un contenido float:right, quiero poner una imagen bajo el menú que se repita, para cuando el contenido es muy extenso, no se vea un espacio muy grande vacio bajo el menú.
He puesto un div bajo el menú, con height:100%, donde el contenedor de la página, body y html tiene heigh:100%, pero no consigo hacer que se expanda hacia abajo. Pongo el html y el css completo.
##########
###html ####
##########
<body>
<div id="contenedor">
<div id="header">
<div id="imagencabecera">
</div>
<div id="titulocabecera">
</div>
</div>
<div id="navegacion">
</div>
<div id="contenido">
</div>
<div id="izquierda">
</div>

<div id="bajoizquierda">
<div id="degsup">
<img src="templates/emch/images/trans-sup.png"/>
</div>
<div id="deginf">
<img src="templates/emch/images/trans-inf.png"/>
</div>
</div>


<div id="espaciobanner">
</div>
<div id="footer">
<div id="altominimo">
</div>
<div id="copyright">
</div>
<div id="contenidopie">
</div>
</div>
</div>
<div id="firma">
</div>
</body>

En el siguiente mensaje pongo el css

pangeacb · #2 (**permalink**) 29/05/2009, 09:09

aquí va el css

##########
####css####
##########
* {
padding: 0;
margin: 0;
}
html, body {
padding: 0;
margin: 0;
min-height:100%;
}
body{
background-color:#838281;
text-align:center;

}
* html body{
height:100%;
}
#contenedor{
position:relative;
text-align:left;
background-image:url(../images/sombracontenedor.png);
background-repeat: repeat-y;
width: 711px;
padding-top:10px;
min-height:100%;
overflow:auto;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
* html body #contenedor{
height:100%;
}
#header #imagencabecera {
width:100%;
display:block;
text-align:center;
float:left;
}
#header #titulocabecera {
display:block;
float:right;
margin-top:5px;
margin-right:auto;
margin-left:auto;
margin-right:6%;
}
#navegacion {
float:right;
width:100%;
}
#navegacion .moduletable{
padding:10px 0px 10px 40px;
}
#navegacion h3 {
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:normal;
}
#navegacion .pathway{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:8pt;
font-weight:bold;
}
#navegacion .pathway a:link{
color:#999999;
font-weight:normal;
text-decoration:none;
}
#navegacion .pathway a:visited{
color:#999999;
font-weight:normal;
text-decoration:none;
}
#navegacion .pathway a:hover{
color:#666666;
font-weight:normal;
text-decoration:none;
}
#izquierda {
overflow:auto;
float: left;
width: 200px;
padding-left: 40px;
padding-bottom:0px;
margin:auto;
color:#666666;
height:100%;
}
#izquierda a:link{
color:#666666;
text-decoration:none;
}
#izquierda a:visited{
color:#666666;
text-decoration:none;
}
#izquierda a:hover{
color:#999999;
text-decoration:none;
}
#izquierda .module_menu div{
background-image:url(../images/sombramenu_alto.png);
background-position:0px top;
background-repeat:no-repeat;
padding-bottom:0px;
padding-top:3px;
margin-top:10px;
}
#izquierda .module div{
background-image:url(../images/sombramenu_alto.png);
background-position:0px top;
background-repeat:no-repeat;
padding-bottom:0px;
padding-top:3px;
margin-top:10px;
}
#izquierda .module_menu div div{
padding-bottom:0px;
margin-bottom:0px;
background-image:url(../images/sombramenu_bajo.png);
background-position:bottom right;
background-repeat:no-repeat;
}
#izquierda .module div div{
padding-bottom:0px;
margin-bottom:0px;
background-image:url(../images/sombramenu_bajo.png);
background-position:bottom right;
background-repeat:no-repeat;
}
#izquierda .module_menu{
background-image:url(../images/sombramenu_centro.png);
background-repeat:repeat-y;
background-position:top right;
padding-left:0px;
}
#izquierda .module {
background-image:url(../images/sombramenu_centro.png);
background-repeat:repeat-y;
background-position:top right;
padding-left:0px;
}
#izquierda #form-login div{
background-image:none;
padding-bottom:30px;
}
#izquierda div div div{
padding-left:10px;
}
#izquierda h3 {
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:bold;
color:#000000;
padding-bottom:10px;
}
#izquierda ul{
padding-bottom:30px;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:10pt;
text-align:left;
list-style-image:url(../images/bullet.png);
}
#izquierda li{
margin-top:10px;
}
#izquierda .parent ul{
margin-left:10px;
padding-bottom:0px;
padding-bottom:0px;
}
#izquierda fieldset{
border:none;
padding-bottom:10px;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:12pt;
}

/*##############################################
###aquí comienza la imagen bajo el menú #####################
###############################################*/
#bajoizquierda{
position:relative;
overflow:auto;
background:url(../images/arabesco.png) repeat-y top left;
float:left;
clear:left;
margin-left:40px;
width:200px;
min-height:100%;
}
#degsup{
border:thin solid #000000;
height:50px;
width:100%;
}
#deginf{
border:thin solid #000000;
position:relative;
top:100%;
height:50px;
width:100%;
margin-top:-100px;
}

/*##############################################
###aquí termina la imagen bajo el menú #####################
###############################################*/
#contenido {
height:100%;
float: right;
padding-right:40px;
padding-bottom:0px;
width:400px;
margin:auto;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
text-align:justify;
}
.imagentexto{
padding:5px;
}
#contenido .sitemap ul {
list-style-image:url(../images/bullet.png);
}
.tool-tip{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
}
#contenido a:link{
text-decoration:none;
color:#999999;
}
#contenido #component-contact{
float:left;
width:400px;
}
#contenido#searchForm{
width:400px;
float:left;
}
#contenido a:visited{
text-decoration:none;
color:#999999;
}
#contenido a:hover{
text-decoration:none;
color:#666666;
}
#contenido img{
border:none;
}
#contenido .componentheading{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:18pt;
text-align:left;
}
#contenido .contentheading{
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:18pt;
text-align:right;
padding-right:10px;
}
#contenido .lineabajotitulo{
background-image:url(../images/subrayado.png);
background-repeat:no-repeat;
background-position:95%;
height:14px;
}
#contenido .small, #contenido .createdate, #contenido .modifydate, #contenido .mxcdefault_dotted{
font-size:8pt;
text-transform:uppercase;
font-weight:bold;
}
#contenido #relateditemlist{
list-style-type:none;
}
#contenido hr{
color:#FFFFFF;
}
#contenido #relateditemtitle{
text-transform:uppercase;
font-size:12px;
}
#contenido #poweredby{
color:#FFFFFF;
font-size:0pt;
}
#contenido #JOSC_formpos{
color:#000000;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:8pt;
height:100%;
background:none;
}
#contenido #JOSC_formpos .onlyregistered{
color:#000000;
}
#contenido .small, .createdate{
padding-bottom:10px;
}
#contenido .modifydate{
padding-top:10px;
}
#contenido .article_column{
padding:0 5px;
}
#contenido .readon {
font-size:8pt;
text-align:center;
}
#espaciobanner {
overflow:hidden;
font-family:"Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:11pt;
font-weight:normal;
float:left;
width:100%;
text-align:center;
padding-bottom:20px;
padding-top:20px;
}
#footer {
bottom:0px;
font-family:"Arial", "Arial Rounded MT Bold", "Arial Unicode MS";
font-size:10pt;
font-weight:bold;
color:#000000;
width: 100%;
clear: both;
background-image: url(../images/hierba.png);
background-repeat: no-repeat;
background-position: 3px bottom;
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top:0px;
overflow:hidden;
}
#footer #altominimo {
height:70px;
width:1px;
float: left;
clear:none;
}
#footer #copyright {
float:right;
clear:none;
padding-right:10px;
padding-top:35px;
text-align:left;
width:auto;
overflow:auto;
background:url(../images/transparente_der.png) no-repeat;
background-position:right bottom;
margin-right:30px;
}
#footer #contenidopie {
float:right;
clear:none;
padding-top:33px;
text-align:right;
width:auto;
overflow:hidden;
}
#footer #contenidopie .moduletable{
text-align:right;
padding-left:10px;
background-image:url(../images/transparente_izq.png);
background-repeat:no-repeat;
background-position:right bottom;
}
#footer #contenidopie .mainlevel{
padding-right:10px;
}
#footer a:link, a:visited{
color:#000000;
text-decoration:none;
}
#footer a:hover{
color:#666666;
text-decoration:none;
}
#firma{
text-align:right;
background-image:url(../images/sombrafirma.png);
background-repeat:no-repeat;
background-position: 2px top;
width: 711px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
height: 50px;
}
#firma img {
margin-top:10px;
border:none;
}

WillxD · #3 (**permalink**) 29/05/2009, 16:54

Sería mejor que dejes tu web para resolver más rápido tu problema.. tu código css es muy extenso O.o! por no saber optmizar..

por ejemplo esto lo podías hacer en una sola línea:

Código:

background-image:url(../images/sombramenu_alto.png);
background-position:0px top;
background-repeat:no-repeat;

Y así hay más cosas que puedes optimizar como los padding, margin. Cuando minimizes tu código es más fácil encontrar los problemas.

Salu2!

DiegoKaiser · #4 (**permalink**) 29/05/2009, 19:02

una vez yo quise hacer eso pero no me cargaba la imagen, lo tuve que dejar en lineas separadas.
Pero con el resto de cosas si salen bien xD.

kseso? · #5 (**permalink**) 30/05/2009, 03:36

Hola Marciaaaaaaaaaaaaaaal Ruiz Escribano

, perdón, digo Pangeacb

Discúlpame, pero como que me dió pereza meterme con tanto código.

Y porqué no cambias el planteamiento y forma de enfocar el layout:
la imagen que quieres que llegue hasta el abajo colócala repetida en y a esa caja contenedora que es la que crece. Después solo es cuestión de alguna adaptación en la "maquetación" de la página.

Un saludo, y recuerda "palomas, ratas del aire"

pangeacb · #6 (**permalink**) 30/05/2009, 05:01

Cita:

Iniciado por kseso?

Hola Marciaaaaaaaaaaaaaaal Ruiz Escribano

, perdón, digo Pangeacb

Discúlpame, pero como que me dió pereza meterme con tanto código.

Y porqué no cambias el planteamiento y forma de enfocar el layout:
la imagen que quieres que llegue hasta el abajo colócala repetida en y a esa caja contenedora que es la que crece. Después solo es cuestión de alguna adaptación en la "maquetación" de la página.

Un saludo, y recuerda "palomas, ratas del aire"

yeejaa, yeeeeejaaa

te refieres a que se repita en el interior, en vez de en el fondo?,

aunque voy a optimizar un poco el código, para que no me siga regañando la inquisición del css.

Un saludo.

kseso? · #7 (**permalink**) 30/05/2009, 05:33

Mira, te pongo un diagrama de bloques con una imagen. A ver si pillas la idea. Y si más tarde tengo un momento, busco uno de tantos layouts que andan por la red donde ya tienen hecho el códigp.
De todas formas, no recuerdo si d.h.2c.l. Mikmoro tiene alguno en su página: www.araudi.net

Un saludo

pangeacb · #8 (**permalink**) 30/05/2009, 05:38

Cita:

Iniciado por kseso?

Mira, te pongo un diagrama de bloques con una imagen. A ver si pillas la idea. Y si más tarde tengo un momento, busco uno de tantos layouts que andan por la red donde ya tienen hecho el códigp.
De todas formas, no recuerdo si d.h.2c.l. Mikmoro tiene alguno en su página: .araudi.net

Un saludo

en la pagina de araudi he mirado la solución que propone, pero me funciona.
Dicha solución es que, el height:100% se amplía al 100% del padre, y que si el padre no está al 100%, el hijo tampoco. Por eso hay que poner al 100% tanto el html como el body, como el div contenedor, dentro del cual está incluido el div de la imagen bajo el menú.
Pues eso, que ya lo he puesto, y nada, sigue sin ampliarse la imagen que se repite.

kseso? · #9 (**permalink**) 30/05/2009, 06:27

mira a ver si esta mini-página te sirve de orientación:

Código html:

Ver originalxhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Jugando con CSS</title>
<style type="text/css">
* {margin: 0; border:0; outline:0; position: relative;}
html, body {
background-color: #f0f0f0;
border: 0;
}
#contenedor{
background: #007f00 url(http://tbn3.google.com/images?q=tbn:9bk_6l3Xr6Y5IM:http://www.galiciacad.com/fotos/hierba06.jpg) repeat-y;
width:700px;
margin:15px auto 0;
overflow:auto;
color:#fff;
}
#menu {
float: left;
width: 135px;
margin-top: 10px;
color: #fff;
}
#contenidos {
float:right;
width: 500px;
padding: 15px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="menu">
<p>Lorem ipsum dolor sit amet consectetuer Proin ut et pretium Quisque. Pede ac consequat ante tellus Nulla leo mus ut Pellentesque mauris. Ridiculus orci Aliquam </p>
</div>
<div id="contenidos">
<p>Lorem ipsum dolor sit amet consectetuer vestibulum natoque tellus lacinia auctor. Est Cum Curabitur sed id tellus dui et a nec risus. Elit Vestibulum pede a ante fames semper orci augue ut Sed. Risus justo consequat fermentum congue sapien orci sapien hac augue Mauris. Metus justo quis pede Vivamus pharetra nec pellentesque mauris pede et. Ligula consequat mauris Nam adipiscing at augue ipsum et orci.</p>
<p>Dolor Aenean Pellentesque consequat tortor Aliquam sociis condimentum diam sagittis malesuada. Laoreet nibh nibh Nam Vestibulum facilisi a non Vestibulum Maecenas In. Mauris pulvinar facilisi pretium accumsan adipiscing Cras eget amet Vestibulum Aliquam. Metus Mauris sed turpis enim mi Cras Nam gravida ornare consequat. Lobortis condimentum quis elit Vestibulum lacus ornare ac a vel auctor. Ligula mollis justo Nam Morbi.</p>
<p>Pellentesque enim nisl auctor et dolor gravida pretium mauris egestas et. Sapien neque Aenean sed accumsan a dolor dolor sit vitae et. Netus id semper lacinia dapibus fringilla ante Proin vitae feugiat elit. Ridiculus quis id enim Aliquam id odio est nibh nulla semper. Nibh turpis pretium aliquam aliquam fames vel elit Fusce Integer turpis. Sed elit accumsan at.</p>
<p>Et faucibus tempor Aenean risus mattis felis wisi congue pede pellentesque. Eu tortor nec adipiscing quis semper nisl magna urna Vestibulum Nam. Lorem felis tortor faucibus enim Proin wisi sed rhoncus justo convallis. Faucibus consequat non eros elit quis mattis mauris lacinia cursus massa. Sapien ut mollis Curabitur Lorem laoreet semper tempor lobortis id ac. Quis at hac est lacinia dui commodo odio dui leo.</p>
</div>
</div>
</body>
</html>

ni los márgenes ni los padding están ajustados. Espero que puedas aplicar la idea base a tu página.
Un saludo

pangeacb · #10 (**permalink**) 30/05/2009, 07:07

Ya veo lo que me decías, pero no es lo que busco.

Tu me indicas en poner una imagen de fondo al contenedor, y que se extienda en toda su altura. Eso me causaría problemas, porque se vería también, por ejemplo, por encima del menú, e incluso, por detrás, ya que la imagen del menú tiene una sombra con transparencia (a través de la cual se vería la imagen).

Existen otros problemas además de los que comento, que no hacen viable la opción de poner la imagen de fondo en el contenedor.

Lo que yo intento hacer es que cuando termine el menú, a continuación comience una imagen, que se extienda hasta el final del contenedor.

Eso he visto que lo consiguen de la forma que explicaba con anterioridad, que es dándole a todos los contendores un height del 100% , pero por algún motivo, en el código que he generado, tiene que haber cualquier detalle que impida que se lleve a cabo.

P.D.: Por cierto, me he fijado en lo que se parece mi avatar al de WillxD

kseso? · #11 (**permalink**) 30/05/2009, 08:01

Pues yo creo que con esa estructura como base sí que se podría conseguir.
Sólo es necesario crear alguna caja contenedora más para para alojar el menú, sin opacidad para que cubra la imagen lateral bajo él. Y si este menú tiene unas dimensiones conocidas, mucho más fácil aparentar que la imagen del fondo repetida comienza donde acaba el menú.

Pero si hay otros factores que lo impiden, seguramente estés en lo cierto.

De todas formas, si la compatibilidad con ie7 y anteriores no te preocupa, puedes utilizar la propiedad "display" y sus valores "table||table-row||table-cell" y utilizar algún comentario condicional para esos navegadores

Algo más de información sobre ello

Un saludo

pangeacb · #12 (**permalink**) 01/06/2009, 09:04

He estado haciendo pruebas con el tema del height a 100%, pero lo más que consigo (y me parece algo bastante extraño), es que me agrande el div al tamaño visible de la pantalla en el navegador.

He optado por rediseñar la página para hacerla de la forma que me indicas.
Gracias por tu ayuda