Entrar

Largo de pagina variable según contenido

sonic · · Solicitar retirada
Hola estoy haciendo pruebas en mi web para poner un sistema de comentarios quiero poner el de disqus o el de intense debate los dos funcionan bien pero no consigo que la pagina crezca a la par de los comentarios con lo cual al final los comentarios se salen de la web, como puedo hacer para que la página se haga más larga según van creciendo los comentarios. Gracias un saludo
skaparate · · Solicitar retirada
Hola:

No le des un alto fijo a la etiqueta que contenga toda la página.

Por lo general, esto debería ser lo básico:

body {
  width: 100%;
  height: 100%;
}

#main {
  height: auto; /* Valor por defecto, así que se puede omitir */
}

index.html
<html>
  <head>
   ...
  </head>
  <body>
    <div id="main">
      <!- CONTENIDO -->
    </div>
  </body>
</html>
skaparate · · Solicitar retirada
@igualada

y no podría ponerse al div de "contenido" height:auto ¿?

Eso es justamente lo que debe hacer, salvo que yo puse un ejemplo. En el fondo debe darle height: auto al div que contiene todo.
sonic · · Solicitar retirada
Gracias por las respuestas puse auto pero no funciona pongo los enlaces uno para el ejemplo se disqus y otro para intense debate como podeis ver al intentar responder o dejar un mensaje estos se salen de la web. Gracias y un saludo
skaparate · · Solicitar retirada
Hmmmm tienes un problema en el diseño... Para empezar, siempre que quieras posicionar un elemento absolutamente, esto es lo que debes hacer:

<html>
<head>
  <style>
    #padre { position: relative; }
    #padre .hijo { position: absolute; top|left|right|top: valor }
  </style>
</head>
<body>
  <div id="padre">
    <div class="hijo"></div>
    <div class="otro"></div>
  </div><!-- #padre -->
</body>

De esta forma se ponen los elementos absolutos, de lo contrario no funciona. Si puedes evitarlo, mejor.

Si quieres alinear un elemento a la izquierda o derecha, utiliza float: left|right. El siguiente ejemplo utiliza elementos flotando:

<html>
<head>
  <style>
    #padre { position: relative; }
    #padre .hijo { position: absolute; top|left|right|top: valor }
    .alignl { float: left; }
    .alignr { float: right; }
    .clear { clear: both }
    /* Lo siguiente debes utilizarlo siempre en la etiqueta padre que contenga elementos flotando (float), a no ser de que la etiqueta padre este flotando también */
    .cf:before, .cf:after { content: ""; display: table; }
    .cf:after { clear: both; }
    .cf { *zoom: 1; }
  </style>
</head>
<body>
  <div id="padre" class="cf"><!-- No esta flotando, por ende necesita la clase cf -->
    <div class="hijo alignl"></div>
    <div class="otro alignr"></div>
  </div><!-- #padre -->
  <div id="padre-flotando" class="alignl"><!-- Esta flotando y no necesita la clase cf -->
    <div class="alignl"></div>
    <div class="alignr"></div>
    <div class="clear"></div><!-- Si no utilizo la clase clear, el elemento quedará pegado a los otros dos. Haz la prueba para que veas lo que ocurre. -->
  </div><!-- #padre-flotando -->
</body>

Nota: si no tienen contenido no verás ninguna cosa XD, así que agrega contenido a los divs si vas a ver el ejemplo en vivo.