A partir de esta Demo Template, me gustaría crear este diseño:fija de encabezado, pie y barras laterales con desplazamiento área de contenido en el centro

enter image description here

pero tengo los siguientes problemas:

Las dos barras laterales no están contenidas dentro del div de contenido desplazable.
El div de contenido no tiene un tamaño fijo
El contenido desplazable no presenta una barra de desplazamiento cuando se desborda
Se prefiere que la barra de desplazamiento principal del navegador se utiliza

Alguien me puede ayudar a arreglar estos problemas?

Fuente

2012-04-07 glarkou

Usando `display:grid`

Esto utiliza varias nuevas características de CSS que pueden o no estar disponible en su navegador de su elección. Estos incluyen Grid Layout, CSS Variables y position:sticky. Las variables CSS se pueden trabajar con valores estáticos y la cuadrícula/position:sticky puede degradarse con gracia con @supports.

/* Remove unnecessary margins/padding */ 
 
html, body { margin: 0; padding: 0 } 
 

 
.wrapper { 
 
    display: grid; 
 
    /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */ 
 
    grid-template-areas: 
 
    "header header header header header" 
 
    "empty_left sidebar_1 content sidebar_2 empty_right" 
 
    "footer footer footer footer footer"; 
 
    /* Only expand middle section vertically (content and sidebars) */ 
 
    grid-template-rows: 0fr 1fr 0fr; 
 
    /* 100% width, but static widths for content and sidebars */ 
 
    grid-template-columns: 1fr 100px 400px 100px 1fr; 
 
    /* Force grid to be at least the height of the screen */ 
 
    min-height: 100vh; 
 
} 
 
.header { 
 
    grid-area: header; 
 

 
    /* Stick header to top of grid */ 
 
    position: sticky; 
 
    top: 0; 
 
    /* Ensure header appears on top of content/sidebars */ 
 
    z-index: 1; 
 

 
    /* General appearance */ 
 
    background-color: #FCFF34; 
 
    text-align: center; 
 
    font-size: 1rem; 
 
    line-height: 1.5; 
 
    padding: 1rem; 
 
} 
 
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */ 
 
:root { 
 
    --header-height: calc(1rem * 1.5 + 1rem * 2); 
 
} 
 

 
.sidebar-1 { 
 
    grid-area: sidebar_1; 
 
} 
 
.sidebar-2 { 
 
    grid-area: sidebar_2; 
 
} 
 
.sidebar-1, 
 
.sidebar-2 { 
 
    display: flex; 
 
    flex-direction: column; 
 
    position: sticky; 
 
    top: 0; 
 

 
    /* Styling to match reference */ 
 
    background-color: #BC514F; 
 
} 
 

 
.content { 
 
    grid-area: content; 
 

 
    /* General appearance */ 
 
    background-color: #99BB5E; 
 
} 
 
.footer { 
 
    grid-area: footer; 
 

 
    /* Stick footer to bottom of grid */ 
 
    position: sticky; 
 
    bottom: 0; 
 

 
    /* General appearance */ 
 
    background-color: #FCFF34; 
 
    text-align: center; 
 
    font-size: .8rem; 
 
    line-height: 1.5; 
 
    padding: .5rem; 
 
} 
 
/* Save footer height to properly set `bottom` and `min-height` for sticky content */ 
 
:root { 
 
    --footer-height: calc(.8rem * 1.5 + .5rem * 2); 
 
} 
 

 
.sticky-spacer { 
 
    flex-grow: 1; 
 
} 
 
.sticky-content { 
 
    position: sticky; 
 
    bottom: var(--footer-height); 
 
    min-height: calc(100vh - var(--footer-height)); 
 
    box-sizing: border-box; 
 

 
    --padding: 10px; 
 
    padding: 
 
    calc(var(--header-height) + var(--padding)) 
 
    var(--padding) 
 
    var(--padding); 
 
    margin-top: calc(0px - var(--header-height)); 
 
}

<div class="wrapper"> 
 
<div class="header">Header (Absolute)</div> 
 
<div class="sidebar-1"> 
 
    <div class="sticky-spacer"></div> 
 
    <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div> 
 
</div> 
 
<div class="content"> 
 
    <div class="sticky-spacer"></div> 
 
    <div class="sticky-content"> 
 
    Scrollable content<br><br> 
 
    line 1<br><br> 
 
    line 2<br><br> 
 
    line 3<br><br> 
 
    line 4<br><br> 
 
    line 5<br><br> 
 
    line 6<br><br> 
 
    line 7<br><br> 
 
    line 8<br><br> 
 
    line 9<br><br> 
 
    line 10<br><br> 
 
    line 11<br><br> 
 
    line 12<br><br> 
 
    line 13<br><br> 
 
    line 14<br><br> 
 
    line 15<br><br> 
 
    line 16<br><br> 
 
    line 17<br><br> 
 
    line 18<br><br> 
 
    line 19<br><br> 
 
    line 20 
 
    </div> 
 
</div> 
 
<div class="sidebar-2"> 
 
    <div class="sticky-spacer"></div> 
 
    <div class="sticky-content"> 
 
    Sidebar 2 Absolute position, Fixed width<br><br> 
 
    line 1<br><br> 
 
    line 2<br><br> 
 
    line 3<br><br> 
 
    line 4<br><br> 
 
    line 5<br><br> 
 
    line 6<br><br> 
 
    line 7<br><br> 
 
    line 8<br><br> 
 
    line 9<br><br> 
 
    line 10 
 
    </div> 
 
</div> 
 
<div class="footer">Footer (Absolute)</div> 
 
</div>

barra de desplazamiento en contenedor de contenido principal

El cuadro de contenido (incluyendo las barras laterales) se puede ajustar a cualquier tipo de anchura (por ciento, pixel, etc). Solo se desplazará el área de contenido desplazable (las barras laterales/pie de página/encabezado simplemente desbordarán la casilla). Sugiero agregar algunas consultas de medios para salir de las barras laterales para que el contenido no se oculte en dispositivos más pequeños, o establecer un min-height en el cuadro de contenido y un min-width en el body.

html, body { 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
header{ 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 60px !important; 
 
    opacity:.8; 
 
} 
 

 
.content { 
 
    position:relative; 
 
    height: 100%; 
 
    width:600px; /* Sizing - any length */ 
 
    padding:60px 0 30px 0; /* Header height and footer height */ 
 
    margin:0 auto 0 auto; /* Center content */ 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.sidebar1, .sidebar2 { 
 
    background: red; 
 
    top:60px; 
 
    bottom:30px; 
 
    width: 100px; 
 
    position:absolute; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.sidebar1 { 
 
    left:0; 
 
} 
 

 
.sidebar2 { 
 
    right: 0; 
 
} 
 

 
#scrollable2 { 
 
    background:green; 
 
    height: 100%; 
 
    min-width: 300px; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    overflow:auto; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 30px; 
 
}

<!-- Always on top: Position Fixed--> 
 
<header> 
 
    header 
 
</header> 
 
<!-- Fixed size after header--> 
 
<div class="content"> 
 
    <!-- Always on top. Fixed position, fixed width, relative to content width--> 
 
    <div class="sidebar1"> 
 
     sidebar-left 
 
    </div> 
 
    <!-- Scrollable div with main content --> 
 
    <div id="scrollable2"> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
    </div> 
 
    <!-- Always on top. Fixed position, fixed width, relative to content width --> 
 
    <div class="sidebar2"> 
 
     sidebar-right 
 
    </div> 
 
</div> 
 
<!-- Always at the end of the page --> 
 
<footer> 
 
    footer 
 
</footer>

El uso principal barra de desplazamiento del navegador

durante el uso de la barra de desplazamiento principal del navegador es posible, sino que también hace que las barras laterales para desplazarse con la página.

html, body { 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
header{ 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    height: 60px !important; 
 
    z-index:100; 
 
} 
 

 
.content { 
 
    position:relative; 
 
    min-height: 100%; 
 
    width:600px; /* Sizing - any length */ 
 
    padding:60px 0 30px 0; /* Header height and footer height */ 
 
    margin:0 auto 0 auto; /* Center content */ 
 
} 
 

 
.sidebar1, .sidebar2 { 
 
    background: red; 
 
    height:100%; 
 
    width: 100px; 
 
    top:0; 
 
    padding-top:60px; 
 
    position:absolute; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.sidebar1 { 
 
    
 
    left:0; 
 
    
 
} 
 

 
.sidebar2 { 
 
    right: 0; 
 
} 
 

 
#scrollable2 { 
 
    height:100%; 
 
    background:green; 
 
    min-width: 300px; 
 
    margin-left: 100px; 
 
    margin-right: 100px; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    -o-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    background: yellow; 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: 30px; 
 
}

<!-- Always on top: Position Fixed--> 
 
<header> 
 
    header 
 
</header> 
 
<!-- Fixed size after header--> 
 
<div class="content"> 
 
    <!-- Always on top. Fixed position, fixed width, relative to content width--> 
 
    <div class="sidebar1"> 
 
     sidebar-left 
 
    </div> 
 
    <!-- Scrollable div with main content --> 
 
    <div id="scrollable2"> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
     content-main<br> 
 
    </div> 
 
    <!-- Always on top. Fixed position, fixed width, relative to content width --> 
 
    <div class="sidebar2"> 
 
     sidebar-right 
 
    </div> 
 
</div> 
 
<!-- Always at the end of the page --> 
 
<footer> 
 
    footer 
 
</footer>

Fuente

2012-04-07 17:49:30 0b10011

Muchas gracias amigo. Una pregunta ¿Es posible desplazar el div desplazable desde fuera del div?Me refiero a dondequiera que te desplaces dentro de la página, quiero que se desplace el div desplazable. ¿Es eso posible? – glarkou

Sí y no (bueno, no en la cantidad de tiempo que tengo). El uso de la barra de desplazamiento principal del navegador lo hace para que las barras laterales también se desplacen. Esto puede estar bien contigo, no estoy seguro. He agregado el ejemplo jsFiddle a mi respuesta. – 0b10011

Gracias de nuevo compañero. – glarkou

EDITAR
1.Add position propiedad como absolute para el div que desea corregir.
2.Mantenga el cuerpo overflow propiedad auto.

Nota: establecer el índice Z del cuerpo en -1 hará que el resto del cuerpo sea inaccesible.
Referencia: http://limpid.nl/lab/css/fixed/

Fuente

2013-03-05 10:11:09 Sorter

¡Gracias por publicar tu respuesta! Tenga en cuenta que debe publicar los puntos útiles de una respuesta aquí, en este sitio, o su publicación corre el riesgo de ser eliminada [Consulte las preguntas frecuentes donde se mencionan las respuestas que son 'apenas más que un enlace'] (http://stackoverflow.com/faq # eliminación). Puede incluir el enlace si lo desea, pero solo como una "referencia". La respuesta debería ser independiente sin necesidad del enlace. –

Gracias, lo tendré en cuenta a partir de ahora. – Sorter

fija de encabezado, pie y barras laterales con desplazamiento área de contenido en el centro

Respuesta

Usando display:grid

barra de desplazamiento en contenedor de contenido principal

El uso principal barra de desplazamiento del navegador

Cuestiones relacionadas

Usando `display:grid`