problema con fondo y height que varía

[Dundee]

Hola gente, el tema es que no se como hacer para que me funcione que el fondo del largo (height) sea dinámico.
Tengo dos capas

Css que tengo

Código:

//Esta contiene a la otra capa y es la que hace que el borde final sea redondeado
.bg_verdoso {background-color:#6DAE37; 
min-height:598px; 
height:auto !important;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

.bg_content {background: url(../images/content.png) ; background-position:center top; background-repeat:no-repeat;height: auto !important;}

El html no lo voy a poner todo por que no lo creo necesario, pondré solo la parte que nos interesa:

Código:

<div class="bg_verdoso">
   <div class="bg_content">
  El height del contenido que va aquí dentro va a tener que variar en función de la cantidad de noticias que se carguen.
  </div>
</div> <!-- fin bg_verdoso -->

No entiendo porque no es atomático el height cuando en ambas clases he puesto height:auto .
Gracias de antemano.

[sanxuan]

La razón es que has definido una altura mínima con min-height:598px. La propiedad height:auto no es necesaria. Puedes borrarla y el div seguirá adaptándose al contenido.
Trata de disminuir el min-height para que el redondeado inferior siga viéndose cuando no haya contenido, o elimínalo si no quieres que se vea el div.bg_verdoso cuando esté vacío.
La solución habitual suele hacer uso del padding para eliminar la posibilidad de que el texto salga por fuera de las esquinas redondeadas.

[Dundee]

Iniciado por sanxuan

La razón es que has definido una altura mínima con min-height:598px. La propiedad height:auto no es necesaria. Puedes borrarla y el div seguirá adaptándose al contenido.
Trata de disminuir el min-height para que el redondeado inferior siga viéndose cuando no haya contenido, o elimínalo si no quieres que se vea el div.bg_verdoso cuando esté vacío.
La solución habitual suele hacer uso del padding para eliminar la posibilidad de que el texto salga por fuera de las esquinas redondeadas.

Gracias por tu respuesta pero no funciona.
El tema es que si quito el min-height de bg_verdoso no sucede absolutamente nada (ahí si tienes razón) , ya que crece de forma automática; pero el problema es si quito el min-height de .bg_content o si lo pongo más pequeño , la capa NO crece sola y cuando ahi mas contenido este sale por fuera, no se como hacer para que aumente de forma automática .

Un saludo y gracias

Gracias

[sanxuan]

Supongo que has probado a mantener la propiedad height:auto en los dos div. Tal vez sea necesario mantenerla para sobreescribir alguna regla definida en otra parte del css que no podemos ver.
Si tienes la página subida a internet sería buena idea dejar un enlace para echarle un vistazo.
Un saludo.

Continúo en este mismo mensaje. Acabo de probar tu código tal cual está y puede que sea el comentario ( //Esta contiene a la otra capa...) el que esté provocando el problema.
Los comentarios en css se encierran entre los caracteres "/*" y "*/ "( /* Esto es un comentario css */).

[Dundee]

Iniciado por sanxuan

Supongo que has probado a mantener la propiedad height:auto en los dos div. .

Si , de hecho así lo tengo:

Css

Código:

.bg_verdoso {background-color:#6DAE37; 
height:auto;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.bg_content {background: url(../images/bg_content.png) ; 
background-position:center top;
 background-repeat:no-repeat;
 margin:85px 0; 
 /*min-height: 698px; */
 height: auto;
 }

Básicamente he pegado lo mismo que en el anterior post , pero bueno para evitar confusiones he creído conveniente hacerlo.
No la puedo mostrar porque no está subida a inet, esta en local.

De todas formas según yo entiendo min-height es para darle un mínimo de largo a una capa (siendo este automático) ; lo que no entiendo es porque tengo que darle min-height: 698px y no hace esto automáticamente, cuando todo el contenido al que me refiero está dentro de ambas capas. Voy a pegar todo el html por si las moscas.


Html

Código:

<div id="container">
<div class="top">imagen cabecera</div>

<div class="header"> 
	<div class="user1"><h1>titulo</h1></div>
	<div class="menu_head"><div class="user2"></div></div>
  
</div><!-- end header -->

<div class="cuerpo"><!-- comienza cuerpo -->
 <div class="bg_verdoso">
	<div class="bg_content"> <!-- comienza bg_content --> 
	
       Contenido del sitio (va todo aquí)
		
	</div><!-- end bg_content -->
	
	
</div> <!-- end bg_verdoso -->
	

</div> <!-- end cuerpo -->	
<!--  <div class="bg_bt_content"> </div> -->
<div class="clr" />
<div class="footer">créditos</div>
</div><!-- end container -->

Mil gracias por la ayuda :(

[mdk]

Prueba asignando un min-height y un height: auto !important;

Saludos.

[Dundee]

Iniciado por mdk

Prueba asignando un min-height y un height: auto !important;

Saludos.

Jeje eso lo tenía antes y me aconsejaron en los foros quitarlo (mira un pelín mas atras).
Gracias de todos modos.