encabezado estático + menú, el cuerpo desplazable

Esto es lo que estoy tratando de lograr:encabezado estático + menú, el cuerpo desplazable

 
+--------screen-----------------------+ 
|  ______________________  |*| 
|  |_static_header______|  |*| 
|  |    |  |  |*| 
|  | content  |menu |  |*| 
|  | scrollable |static|  |*| 
|  |    |  |  |*| 
|  |    |  |  |*| 
|  |    |  |  |*| 
+-------------------------------------+

El contenido es de altura variable, y la barra de desplazamiento contenido debe ser espectáculo en el cuerpo de la página (y no en su en el área). Logré obtener la idea básica, pero estoy teniendo problemas para obtener el contenido div en su posición correcta cuando se muestra la barra de desplazamiento, e incluso si configuro para mostrar siempre las barras de desplazamiento, no puedo usar un ancho fijo porque difieren de un navegador a otro.

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> 
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"> 
     Header 
    </div> 
</div> 

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's --> 
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;"> 
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;"> 
     <div style="background-color:Orange; width:100%; height:900px;"> 
      Content 
     </div> 
    </div> 
</div> 

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;"> 
    <div style="width:500px; float:left;"> 
     <div style="background-color:Green; float:right; width:200px; "> 
      Menu 
     </div>    
    </div> 
</div>

En el código de seguridad del contenido está fuera por el ancho de la barra de desplazamiento, ¿cómo puedo hacerlo bien con el resto de la página (es decir. El cálculo de su posición sin tener en cuenta el ancho de la barra de desplazamiento, incluso si tiene uno)?

Fuente

2011-03-04 Danicco

+1 ascii gráfico. Y siempre es bueno ver una buena pregunta formateada de un nuevo usuario en SO. –

¿Se trata de ancho fijo o debe el encabezado abarcar toda la ventana gráfica? – roryf

Todo el "cuerpo" (encabezado, contenido + menú a continuación) debe tener un ancho fijo. Tuve problemas antes con monitores anchos realmente grandes cuando no establecí un ancho fijo ... – Danicco

Si entiendo su problema correctamente esta será una solución: http://jsfiddle.net/7pJS8/

Fuente

2011-03-04 17:19:10 Adam

Supongamos que la sección del encabezado estático no tiene una altura constante, ¿pero varía según la situación? ¿Todavía hay una manera de CSS para que el contenido debajo de él se desplace, en lugar de toda la ventana? – enigment

Hay formas de hacerlo con alturas fijas y luego usar la propiedad de desbordamiento en las áreas desplazables. Sin embargo, esa no es una buena práctica, lo que debería observar es usar un encabezado fijo o un encabezado de desplazamiento (uno que sigue el área de visualización mientras el usuario se desplaza hacia arriba y hacia abajo) desde jQuery o su biblioteca JS de su elección.

Fuente

2011-03-04 17:09:00 Brian

no position:fixed resolver su problema? Si configura position:fixed en el encabezado y el menú div?

Fuente

2011-03-04 17:29:46

Sí, sí, aunque recuerdo vagamente que esta no es una opción "estándar". O tal vez fue con respecto a la posición de fondo, ahora no estoy seguro. Voy a intentarlo, ¡gracias! – Danicco

<style> 
body { 
    padding: 0px; 
} 
.container { 
    margin: 0px auto; 
    position: relative; 
    width: 500px; 
} 

#header { 
    left: 0px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index: 1000; 
} 
#header .container { 
    background: blue; 
    height: 100px; 
} 

#content { 
    background: green; 
    height: 1500px; 
    margin-top: 100px; 
} 
#content .inner { 
    margin-right: 200px; 
} 

#sidebar { 
    left: 0px; 
    position: fixed; 
    top: 100px; 
    width: 100%; 
    z-index: 1000; 
} 
#sidebar .inner { 
    background: red; 
    height: 200px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 200px; 
} 
</style> 

<div id="header"> 
    <div class="container"> 
     header 
    </div> 
</div> 
<div id="content" class="container"> 
    <div class="inner"> 
     content 
    </div> 
</div> 
<div id="sidebar"> 
    <div class="container"> 
     <div class="inner"> 
      sidebar 
     </div> 
    </div> 
</div>

Posible solución: http://jsfiddle.net/zWERN/

Fuente

2011-03-04 17:31:06 roryf

El establecimiento de un desplazamiento en toda la página, podría resultar en una cabecera de desaparecer y el menú - cuando el contenido es largo.

Lo que está buscando es un subconjunto del Holy Grail design.

Here 's una implementación utilizando la pantalla flex:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <!-- No need for 'flex-direction: row' because it's the default value --> 
    <div style="display: flex; flex: 1"> 
     <div>NAV|</div> 
     <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
     </div> 
     <div>|SIDE</div> 
    </div> 
    <div>------------<br/>FOOTER</div> 
    </body> 
</html>

Fuente

2015-10-23 07:25:29

encabezado estático + menú, el cuerpo desplazable

Respuesta

Cuestiones relacionadas