Div expandible

[eduardo90]

Hola a todos y a todas

mi pregunta es simple pero necesaria

tengo un div estatico de un height de 950px;

quiero que tenga este div una altura minima de 950px y si por ejemplo tengo informacion dentro de dicha div y la info revisa los 950px quiero que vaya creciendo automaticamente.


saludos espero me ayuden.

gracias

[lubtufano]

Pues se puede utilizar min-height: 950px para el div.

[eduardo90]

gracias por la respuesta

quisiera saber si el codigo fuera algo asi


#contenedor
{
margin:auto:
width:500px:
min-height:950px:
height:80%;

}

creen que con esa porcion de codigo mi div crecera automaticamente, segun la cantidad de contenido que se le coloque.


saludos

pd. Un ejemplo es nuestro foro que va creciendo segun la cantidad de mensajes eso quiero lograr ir haciendo crecer mi div segun la info.

[IsaBelM]

la propiedad height no hace falta. además, el salto de propiedad se hace con (;) no con (:)

[eduardo90]

Gracias por contestar

a todos, gracias por aclarar lo de las ; se me fue en el codigo este teclado es raro jejejej.

bueno si le coloco un min-height con eso bastaria para que mi div cresca?

saludo y gracias

[IsaBelM]

veamos, un bloque (div, p) por defecto tiene 100% de ancho con respecto a su contenedor y un alto de auto.

un ejemplo para que lo entiendas

.contenedor
{
margin:auto;
width:500px;
min-height:100px;
border: 1px solid red;
}


<div class="contenedor">el bloque tendrá una altura de 100px puesto que el contenido no hace que el bloque alcance esa altura</div>


<div class="contenedor"><b>el contenido del bloque supera los 100px, y el bloque aumenta su largo</b><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>

[eduardo90]

Muchas gracias les di karma a todos por su excelente ayuda

[gekubo]

Hola,

no se que esta mal en este parte de código de mi web. Se trata de una sección con pestañas donde quiero que se me muestre todo el contenido principal de mi web (artículos, about, enlaces...) y el main se adapte a la altura de lo que contenga. Ahora lo tengo puesto a 4000px y ello me deja un enorme espacio en blanco pero es que si no se come el contenido de algunos artículos. El problema es que al borrar el atributo min-height, cambiarlo a % o ponerlo en auto, el cuadro de pestañas se me queda reducido a la nada.

CSS ///

section {
float:left;
width:70%;
margin:50px 0 50px 50px;
}

#main {
float:left;
width:100%;
}

.tabs {
position:relative;
min-height:4000px;
clear:both;
}

.tab {
float:left;
}

.tab label {
background:#fff;
padding:10px 20px 10px 20px;
border:1px solid #777;
margin-left:-1px;
position:relative;
left:1px;
font-size:0.85em;
font-weight:bold;
cursor:pointer;
}

.tab [type=radio] {
display:none;
}

.content {
position:absolute;
overflow:hidden;
top:20px;
left:0;
right:0;
bottom:0;
padding:10px 10px 10px 10px;
background:#e9eaeb;
border:1px solid #777;
opacity:0.85;
filter:alpha(opacity=85);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Op acity=85)";
}

[type=radio]:checked ~ label {
background:#e9eaeb;
border-bottom:1px solid #e9eaeb;
z-index:2;
}

[type=radio]:checked ~ label ~ .content {
z-index: 1;
}

HTML ///

<section>

<div id="main"><div class="tabs">
<div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Últimos artículos</label>
<div class="content">
<article>
<div id="post">
<ol>
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
<img src="http://db.tt/Ggtj6DwZ" width="100%" alt="hr" />
{Body}
</li>
{/block:Text}
<div id="share">
<div class="fb-like" data-send="true" data-layout="button_count" data-width="50" data-show-faces="false" data-action="recommend" data-font="Ubuntu"></div>
<div class="g-plusone" data-size="small"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="Interesante artículo:" data-via="gekubo" data-lang="es" data-hashtags="orientalia"></a>
</div>
<img src="http://db.tt/Ggtj6DwZ" width="100%" alt="hr" />

<script type="text/javascript"><!--
google_ad_client = "ca-pub-8423330681651106";
/* footer */
google_ad_slot = "3363983417";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

{/block:Posts}
</ol>
</div>
</article>
</div>
</div>

<div class="tab"><input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Fan Page</label>
<div class="content">

</div>
</div>

<div class="tab"><input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Últimas noticias</label>
<div class="content">

</div>
</div>

<div class="tab"><input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Acerca de...</label>
<div class="content">

</div>
</div>

</div></div>

</section>