Esto es lo que estoy tratando de lograr:
+--------screen-----------------------+ | ______________________ |*| | |___static_header____| |*| | | | |*| | | content | |*| | | scrollable | |*| | | zoomable | |*| | | | |*| | | | |*| +-------------------------------------+El contenido es de altura variable, y me gustaría que se pueda ampliar y desplazar. El encabezado debe ser estático con un tamaño fijo ignorando el nivel de zoom del cliente. No estoy seguro de haber visto esto antes. Mi código actual a continuación todavía no es adecuado para desplazarse: la barra de desplazamiento sube hasta el encabezado y me gustaría que se detuviera en los bordes del contenido tanto para hacer zoom como para desplazarse. ¿Es esto factible sin usar un iframe para la sección de contenido? No es necesario que sea solo CSS
body { padding: 0; } .wrapper { margin:0 auto; width: 1000px; } .static { width:1000px; z-index:2; height:100px; position: fixed; } .header { background-color: silver; height:100px; } .content { background-color: orange; width:800px; height:500px; float: left; position:relative; top: 100px; } <div class="wrapper"> <div class="static"> <div class="header"> Header </div> </div> <div class="content"> Content </div> </div>Debe tener una height en el elemento principal, en este caso, el body para el overflow: hidden; para trabajar como se esperaba. Luego puede establecer las alturas en los otros elementos, solo asegúrese de que no excedan el 100% para que no haya un overflow body . Vea los cambios a continuación.
body, html { padding: 0; height: 100%; overflow: hidden; } .wrapper { margin: 0 auto; width: 90%; height: 100%; } .static { width: 100%; z-index: 2; position: sticky; overflow: hidden; } .header { background-color: silver; height: 100px; } .content { background-color: orange; width: 80%; height: 95%; overflow-y: scroll; position: relative; } .content-wrapper { height: 2000px; } <div class="wrapper"> <div class="static"> <div class="header"> Header </div> </div> <div class="content">scroll this content only <div class="content-wrapper"></div> </div> </div>