html - template - Haz que la div desplazable ocupe la altura restante

html structure template

Question

Intento hacer una página con un diseño muy simple: un encabezado que se mantiene en un lugar y contenido que se desplaza por debajo. El encabezado div tendrá una altura desconocida que muestra todo su contenido. Quiero que el contenido div ocupe todo el espacio entre la parte inferior del encabezado y la parte inferior de la página Y que pueda desplazarse.

Tengo un par de restricciones sobre esto:

• No quiero usar un posicionamiento fijo o absoluto para mantener el encabezado en su lugar, sino tener un div de la altura perfecta para mostrar el contenido, y solo tener ese div ser desplazable
• No quiero establecer max-height , o cualquier otra propiedad que requiera el conocimiento de la altura del encabezado div

Los dos métodos que he explorado para lograr esto son usar un diseño de tabla y usar un cuadro flexible. No he logrado desplazarme trabajando con ninguno de estos dos métodos. A continuación se muestra el código para ambos intentos. Estoy usando React. Cualquier puntero sería muy apreciado. ¡¡Gracias!!

EDITAR : Hice esto exitosamente usando estilos en línea y midiendo la altura del encabezado después de que se generó. Esto funcionó en Chrome en escritorio, Android Chrome y navegador Android, pero se rompió en ios safari. No sé por qué se rompió, y estoy trabajando en la depuración, pero preferiría una solución más limpia que no requiera estilos en línea. ¡Gracias!

el elemento de reacción:

var SimpleScrolly = React.createClass({
    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;
        var sampleHeader = "this is a header!"

        return(
            <div className={"simple_scrolly"}>
                <div className={"header"}>
                    {sampleHeader}
                </div>
                <div className={"content"}>
                    {sampleText}
                </div>
            </div>
            );
    }
});

estilo para el diseño de la mesa:

.simple_scrolly{

  display: table;
  height: 100%;

  .header{
    display: table-row;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: table-row;
  }
}

estilo para el diseño flexible:

.simple_scrolly{

  display:flex;
  flex-direction: column;
  align-items: flex-start;

  .header{
    flex-grow:0;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-grow:1;
  }
}

Answer 1

En realidad es bastante factible sin JS. Puedes hacer esto fácilmente con flex-box usando un pequeño "hack".

Trabajé en la parte superior de tu ejemplo de cuadro flexible, puedes verlo tú mismo en este pequeño bolígrafo que hice http://codepen.io/elleestcrimi/pen/LENQvr

La idea es esto:

1. El encabezado tiene flex-grow: 0 //This only fills up space as much as the content
2. El contenido tiene flex-grow: 1 //This way this fills up the space even if there is no content
3. Coloque a todos los hijos de contenido en una nueva div llamada #inner-content
4. #content absolutamente el #inner-content para rellenar #inner-content , y permite que se desplace.
5. Tada!

Aquí está el código a continuación:

#header
  flex-grow: 0

#content
  overflow: hidden
  flex-grow: 1
  position: relative

#inner-content
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: auto

body 
  display: flex
  flex-direction: column