HTML5 uso de CSS para lograr pura "escala bisectriz" todo el espacio vertical

demanda

La necesidad de lograr cabeza fija en la "pantalla" por encima de + desplazamiento + parte inferior central fijo bajo el estilo de diseño de página "pantalla".

Al igual que en el siguiente efecto: Diseño CSS - inferior fijo, el tiempo suficiente contenido y cambiar su posición con el contenido, siempre en la parte inferior del blog _ red de blogs -CSDN _wj1224_

Por desgracia, la URL anterior se da a soluciones de altura fija no cumplen con los requisitos.

reclamación

1. Debe utilizar CSS puro

Si el uso de JS calcula dinámicamente de acuerdo con el diseño, también es posible.

Con la obtención de la altura de la cabeza y la parte inferior de la disposición, y entonces se puede obtener la altura de la pantalla menos la altura a la mitad.

Altura = Altura de fijación media la pantalla - la altura de la cabeza - altura de la parte inferior

2. No se puede utilizar tabla de disposición

Debido a que el proyecto UNI-APP, no vamos a considerar el uso de otros elementos HTML para lograr la disposición específica

3. La altura del elemento no puede escribir muertos

Fácil de instalar diferente altura de la pantalla del teléfono móvil, si la altura no modificable, escasa compatibilidad.

soluciones

El programa final: `display: flex`+ `position:fixed;`+`overflow: auto;`

Código es el siguiente

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;position:fixed; top:0;left: 0;right: 0;bottom: 0;">
  <div>我始终显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为1份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div style="flex: 5;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为5份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div >我始终显示在屏幕底部</div>
</body>
</html>

esquema de mediatrices: `display: flex`+`flex`

Fundamental para esta contenido del programa es baja, la parte inferior de la pantalla en la parte inferior del contenido de la pantalla durante mucho tiempo, la parte inferior de un documento siga la visualización llegar al final del documento.

Entre la parte de contenido por lo menos cuando los mismos obtiene la distribución espacio restante, la cabeza y la parte inferior normalmente se espera que permanezca en su posición.

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是短短的内容；</li>
    </ol>
  </div>
  </div>
  <div >我现在显示在屏幕底部</div>
</body>
</html>

Sin embargo, el contenido de la cual las porciones múltiples sobre la misma restantes resultantes distribución espacial, la altura del elemento hijo del contenedor padre va a explotar altura, en lugar de la "fija" para un comienzo "el resultante asignación de espacio libre"

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在文档的顶部,会随文档滚动</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；自身无法滚动；会随文档滚动</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  </div>
  <div >我现在显示在文档的底部,会随文档滚动；</div>
</body>
</html>

material de referencia

css lograr inferior de la página se fija en la parte inferior de la pantalla, después de contar el contenido de pantalla completa seguido de cerca por los dos métodos _JavaScript_ cerdos vuelan -CSDN blogs blog
1. / * Porque es así para enmascarar el efecto de fijo * /
2. posición: fijo;
3. / * No, esto no puede ser enrollado * /
4. overflow: auto;
Flex implementado utilizando ancho de la disposición de adaptación · Edición # 14 · shaozj / blog

flex-shrink: 0; Cuando se expresa elemento flexible más allá del recipiente ancho no está comprimido, de modo que la anchura del elemento puede ser suavizada, de forma que el aparece la barra de desplazamiento.
diseño de la flexión, manteniendo el contenido no exceda el envase de la solución _JavaScript_Alex_Zhao el blog el blog -CSDN

Si no se establece la anchura, .CONTENT infinitas distracción puede nodos secundarios;

Que el contenido es proporcionado a la flexión como la anchura restante a 1, lo hará de forma dinámica desde el contenedor principal, y no el contenido de sus sub-elementos a la distracción.
CSS - posicionar propiedades usos posición detallada (estática, relativa, fijo, absoluto)

(. 1) fija generar un elemento de posicionamiento absoluto, el elemento con respecto a la colocación de la ventana del navegador.

Cambio (2) elemento posicionado fijo no se desplaza con la barra de desplazamiento de la ventana del navegador, el documento no se verá afectado por el flujo de influencia, pero siempre se encuentra en algún lugar dentro de la vista de la ventana del navegador.
Soluciones registraron un contenido de clase div padre no puede acolchar distracción, no de la solución matriz altura div. _ Red _lihang199 el blog el blog -CSDN

Donde flex está no layout div suavizado se puede inicializar valor flex-contracción de 1, es decir, la falta de espacio se presiona automáticamente, el establecimiento de un valor de 0, se puede suavizar div
flex desbordamiento _dearMengJJ elemento secundario de blogs blog -CSDN

: El elemento de diseño de la primavera es la expansión y contracción de su capacidad.
flex: 1, min-width: 0 a asegurar que los contenidos no superen la caja padre _JavaScript_LiuJingye123 Blog Blog -CSDN

Si no min-anchura, cuando el contenido es mayor que la anchura de la caja excedería la caja padre restante, se proporciona para asegurar que el contenido de min-width confinados dentro de la caja padre
Frente: contenido de la página no es suficiente, el pie de página es siempre fija en la parte inferior de la parte delantera del blog _JavaScript_ col -CSDN
1. El posicionamiento absoluto
2. margen negativo
El método de la reivindicación pie de página por encima de dos altura fija.