Encabezado/Contenido/Diseño de pie de página con contenido desplazable y pie de página en la parte inferior de la ventana gráfica

Question

Hay muchos cuasi duplicados en esta pregunta, lo sé: webpage template where content takes full height of viewport if has 1 line minus footer es uno, pero eso no es lo que quiero; esta es la pregunta más divertida: How to create an HTML CSS Page with Header, Footer and Content que en su mayoría describe lo que quiero, creo, pero desafortunadamente es algo incoherente y no hay realmente una respuesta. He encontrado un montón de ayuda para hacer las cosas que probablemente podría averiguar por mí mismo, y lo que no quiero:

• cabecera fija, pie de página fija en la parte inferior para el contenido breve pero empuja hacia abajo fuera de la página cuando el contenido es más largo (como esta configuración tan repetida aquí: http://boagworld.com/technology/fixed-footers-without-javascript)
• fijo encabezado, contenido y pie de página, en el pie de página no se fija en la ventana inferior
• cabecera y el pie fijo en rollos de contenido "detrás" de la cabecera y el pie - este es lindo y lo he usado, pero no es lo que quiero en este momento

sé cómo iba a conseguir lo que quiero si estuviera usando el "roto" o "caja de frontera" modelo de caja:

1. ponga un recipiente de altura 100% donde quisiera horizontalmente en la página, con "posición: relativa" para facilitar el manejo del contenido
2. En el contenedor, coloque tres divs absolutamente posicionados: el encabezado, que se pega a la parte superior (con una altura fija); el pie de página, pegado a la parte inferior (también altura fija); y el contenido, con una altura del 100% pero con relleno en la parte superior e inferior para tener en cuenta el encabezado y el pie de página.

En el modelo de caja "quebrada", dar a la caja de contenido al 100% de altura funcionó bien, porque la altura incluía el relleno superior e inferior. Esto incluso funcionó de maravilla en el modo de las peculiaridades de IE6, y para Firefox solo hubiera usado "-moz-box-sizing: border-box;" para hacer que funcione de la misma manera.

Pero aquí estamos, viviendo en el futuro, con colonias lunares y pizzas congeladas para el desayuno, así que trato de no recordar demasiado acerca de los días de "frontera". Lo más difícil para mí para "obtener" con esta técnica de diseño es cómo hacer el contenido de desplazamiento. El único enfoque que puedo pensar es una variación hacker en lo anterior:

1. Una vez más, comenzar con un recipiente de altura 100%, "position: relative"
2. Una vez más, la cabecera con posición absoluta y pie de página, con alturas fijas
3. Para el contenido, me gustaría incluir un div sin altura específica, pero con "superior" e "inferior" establecido de acuerdo con el encabezado y el pie de página.

Esa técnica no funcionará realmente en IE6; bueno, de hecho no funcionará en absoluto, porque IE6 no deriva la altura de la implicación de establecer tanto "arriba" como "abajo". Podría usar ese material "activo" en el CSS que IE admite para calcular de manera efectiva la altura con Javascript, pero considero que es bastante desagradable.

He pasado por muchas descripciones de problemas de diseño muy similares en la web, pero la clave que aún tengo que encontrar es una buena técnica para desplazar ese cuadro de contenido intermedio.Tengo la sensación de que podría ser posible usar un cuadro de contenido con márgenes superior e inferior para tener en cuenta el encabezado y el pie de página, pero no sé cómo restringir su altura para que la barra de desplazamiento se active en el punto correcto (cuando los contenidos reales desbordan el espacio entre la parte inferior del encabezado y la parte superior del pie de página).

Ideas? Enlaces a tesoros de plantillas? (Por cierto, el dominio de Matthew James Taylor parece haber desaparecido en este momento, creando una gran perturbación en la Fuerza.) Estoy prácticamente sin ideas.

actualización Este es un ejemplo de lo que quiero: http://gutfullofbeer.net/dreamlayout.html

Eso ejemplo, la página debe trabajar en Firefox y Chrome y creo que Safari, y medias obras en IE8 (sólo la mitad, porque por supuesto que no podía No esperaba que Microsoft obtuviera "-ms-border-box" para que funcione correctamente).

También estoy agregando la etiqueta "javascript" en caso de que algún genio pueda darme un truco de IE que no sea demasiado repugnante.

otra actualización Aquí está el diseño de "compromiso", donde el contenido central se desplaza "debajo" del encabezado y pie de página, con la barra de desplazamiento suministrada por un contenedor externo. En realidad se ve amable, dependiendo de tus gustos, y funciona en IE6 y creo que en todos lados (aunque no he probado Opera). Ignora los colores por supuesto; solo están allí como ayudas de diagnóstico.

http://gutfullofbeer.net/compromiselayout.html

Answer 1

Tal vez esto le ayudará a: (Es necesario jQuery)

$(function() { 
 
\t $("#toggle-content").click(function() { 
 
     $(".more-content").toggleClass("less-content"); 
 
\t }); 
 
});

body { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
} 
 

 
.fixed-top { 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #faa; 
 
} 
 

 
.wrapper { 
 
    positon: static; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20vh; 
 
    background: #ffa; 
 
} 
 

 
.fixed-bot { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 20vh; 
 
    background: #faa; 
 
    opacity: .5; 
 
    bottom: 0; 
 
} 
 

 
.more-content { 
 
    /* display: block; */ 
 
    overflow-y: scroll; 
 
    transition: all 0.3s ease; 
 
    height: 40vh; 
 
    
 
} 
 

 
.less-content { 
 
    height: 0; 
 
} 
 

 
/* 
 
other styles 
 
*/ 
 

 
h1,h2 { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="fixed-top"><h1>THIS IS HEADER CONTENT</h1> 
 
    <button id="toggle-content" type="button">MORE/LESS</button> 
 
</header> 
 
<section class="wrapper"> 
 
    <section class="content"><h2>CONTENT</h2>, Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. 
 
    </section> 
 
    <section class="more-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis, dolor quis pharetra bibendum, purus est porta purus, eu elementum orci tortor eu metus. Pellentesque et neque id metus tincidunt maximus. Mauris ac enim iaculis, interdum tellus a, congue arcu. Proin id justo ut nisi pharetra suscipit fermentum et tortor. Nullam felis libero, sodales a lacus vel, molestie feugiat odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lorem diam, tincidunt sit amet ex quis, ullamcorper euismod urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in tristique lorem, quis placerat diam. Nullam eleifend odio at dui cursus faucibus. Quisque ac nisi porttitor, molestie est non, facilisis dui. Donec condimentum neque vel purus sodales, pulvinar blandit ante pulvinar. Pellentesque tempor, mi non iaculis volutpat, nibh nulla laoreet nisi, viverra laoreet diam nunc vitae dui. Suspendisse a dignissim dolor, quis efficitur libero. Fusce enim sem, consequat nec rhoncus eu, euismod ac velit.</p> 
 
</section> 
 
<footer class="fixed-bot"> 
 
</footer> 
 
</section>