CSS pie de página adhesivo, encabezado con contenido desplazable

Fondo: en pantallas pequeñas cuando el teclado está arriba y el pie de página se encuentra en su parte superior, luego cubre los campos de entrada en el área de contenido. Aquí están los requisitos (algunos tomados de [aquí] [1]):

  • El pie de página debe estar visible si el contenido de arriba es más corto que la altura de la ventana gráfica del usuario.
  • Si el contenido es más alto que la altura de la ventana gráfica del usuario, el pie de página debería desaparecer de la vista y descansar en la parte inferior de la página, como es natural.
  • Esto debe hacerse sin JavaScript
  • El encabezado debe ser fijo en la parte superior.
  • La parte más importante es que solo el contenido puede tener una barra de desplazamiento si es necesario
  • Tiene que funcionar en Android 4.x, IOS> = 7.1 WebView, elemento de navegador web WP8.1

Así es como puedo hacer que el contenido se pueda desplazar ahora mientras pongo el pie de página en la parte inferior.

body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #wrapper { min-height: 100%; position: fixed; } header { height: 72px; background-color: red; } #content { overflow: auto; border-bottom: 1px solid red; margin-bottom: 50px; } footer { height: 50px; background-color: black; position: absolute; bottom: 0; top:auto; left:0px; width:100%; } 

Update1

Esto es lo que podría llegar a hacer hasta ahora. http://jsfiddle.net/gfqew5un/3/

 body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } #wrapper { min-height: 100%; position: fixed; } header { height: 72px; background-color: red; } #content { overflow: auto; border-bottom: 1px solid red; margin-bottom: 50px; } footer { height: 50px; background-color: black; position: absolute; bottom: 0; top:auto; left:0px; width:100%; } 

Está cerca de mi objective final, pero el problema con esta solución surge cuando el contenido es más largo que la ventana gráfica. En ese caso, el pie de página sale de la pantalla, pero quiero que permanezca en la parte inferior mientras el contenido obtiene una barra de desplazamiento y se extiende hasta la parte superior del pie de página. Por lo tanto, una altura máxima codificada en el contenido no funcionará. Necesito algo más dynamic.

Puede lograr fácilmente este efecto usando la opción flex de CSS3.

HTML:

 

Your header

Lorem ipsum dolor
footer content

CSS:

 html { height: 100% } body { display: flex; flex-direction: column; height: 100%; } #content-wrapper { display: flex; flex-direction: column; flex: 1; overflow: auto; } #content { flex: 1; } footer { height: 35px; padding-top: 20px; } 

https://jsfiddle.net/puybgmps/

Debes usar position: relativo para asegurarte de que la posición de los pies está justo debajo del contenido. si usa max-height para su div de contenido en combinación con el desbordamiento: automáticamente aparece la barra de desplazamiento.

Este es el código CSS:

 header{ height: 72px; background-color: red; position: relative; left: 0px; right:0px; overflow: visible; } #content{ overflow:auto; position: relative; max-height:200px; } footer{ height: 50px; background-color: black; position: relative; } 

Enlace a JSFiddle