viewport - vmax - vh y vw en css

div con altura mínima dinámica basada en la altura de la ventana del navegador

Question

Tengo tres elementos div : uno como encabezado, otro como pie de página y un centro de contenido div .
el div en el centro necesita expandirse automáticamente con el contenido, pero me gustaría una min-height tal forma que el div inferior siempre alcance al menos la parte inferior de la ventana, pero no esté fijo allí en páginas más largas.

Por ejemplo:

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page''s content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>

Answer 1

Como se mencionó en otra parte, la función CSS calc () puede funcionar bien aquí. Ahora es en su mayoría compatible. Usted podría usar como

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}

Answer 2

Es difícil hacer esto.

Hay una min-height: estilo css, pero no funciona en todos los navegadores. Puede usarlo, pero el mayor problema es que necesitará configurarlo en un 90% o en números como ese (porcentajes), pero los divs superior e inferior usan tamaños de píxeles fijos, y no podrá reconciliarlos. ellos.

 var minHeight = $(window).height() -
                 $(''#a'').outerHeight(true) -
                 $(''#c'').outerHeight(true));

if($(''#b'').height() < minHeight) $(''#b'').height(minHeight);

Sé que A y c tienen alturas fijas, pero las mido en caso de que cambien más adelante.

Además, estoy midiendo la altura de b (no quiero hacer que sea más pequeña después de todo), pero si hay una imagen allí que no carga, la altura puede cambiar, así que ten cuidado con cosas como esas.

Puede ser más seguro hacer:

$(''#b'').prepend(''<div style="float: left; width: 1px; height: '' + minHeight + ''px;">&nbsp;</div>'');

Lo que simplemente agrega un elemento a esa división con la altura correcta, que actúa efectivamente como altura mínima incluso para los navegadores que no la tienen. (Es posible que desee agregar el elemento a su marca, y luego simplemente controlar su altura mediante javascript en lugar de agregarlo de esa manera, de esa manera puede tenerlo en cuenta al diseñar el diseño).

Answer 3

Es probable que tengas que escribir algunos JavaScript, porque no hay manera de estimar la altura de todos los usuarios de la página.

Answer 4

He encontrado esta cortesía de ryanfait.com . En realidad es muy simple.

Para hacer flotar un pie de página en la parte inferior de la página cuando el contenido es más corto que la altura de la ventana, o en la parte inferior del contenido cuando es más largo que la altura de la ventana, utilice el siguiente código:

Estructura HTML básica:

<div id="content">
  Place your content here.
  <div id="push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

Nota: nada debe colocarse fuera de los divs ''#content'' y ''#footer'' a menos que esté absolutamente posicionado.
Nota: no se debe colocar nada dentro de la división ''#push'' ya que estará oculto.

Y el CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #push on longer pages*/
}
#footer, #push {
  height: 4em;
}

Para hacer que los encabezados o pies de página abarquen el ancho de una página, debe posicionar absolutamente el encabezado.
Nota: si agrega un encabezado de ancho de página, creo que es necesario agregar un div de contenedor adicional a #content. El div exterior controla el espaciado horizontal mientras que el div interno controla el espaciado vertical. Se me pidió que hiciera esto porque descubrí que ''min-height:'' funciona solo en el cuerpo de un elemento y agrega relleno a la altura.

* Edit: falta el punto y coma

Answer 5

No se necesita hackear ni js. Simplemente aplique la siguiente regla a su elemento raíz:

min-height: 100%;
height: auto;

Elegirá automáticamente el más grande de los dos como su altura, lo que significa que si el contenido es más largo que el navegador, será la altura del contenido, de lo contrario, la altura del navegador. Este es el css estándar.

Answer 6

Si #top y #bottom tienen alturas fijas, puedes usar:

#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}

actualizar

Si desea que #central estire hacia abajo, podría:

• Falsea con un fondo en el padre;
• Utilice CSS3 (no ampliamente soportado, lo más probable) calc() ;
• O tal vez use javascript para agregar dinámicamente min-height .

Con calc() :

#central {
    min-height: calc(100% - 300px);
}

Con jQuery podría ser algo como:

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});

Answer 7

Solo busque mi solución en jsfiddle , se basa en csslayout

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}

<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>