Ponga div debajo de la barra de navegación y no superponga el contenido

Mi problema es que arreglé una barra de navegación en la parte superior de mi página web e incluye ambos márgenes laterales y uno superior. Debajo de esta barra de navegación, quiero configurar un contenedor desplazable.

Permítanme decir que estoy usando Bootstrap 3.2.0 para diseñar el sitio.

El problema es que debido a los márgenes de mi barra de navegación, el contenido que quiero poner debajo se superpone a la barra de navegación y se muestra junto a la barra de navegación. Para una mejor explicación de esto, te proporciono mi código y un ejemplo en vivo:

ACTUALIZACIÓN: He notado algo que aumenta un poco lo difícil desde mi punto de vista, y es que el cuerpo tiene una regla para ocultar el desplazamiento y no permite que el desplazamiento suba o baje:

Me gustaría simplemente desplazarme por el contenido “Hola mundo” y, obviamente, que todo el contenido se muestra desde la primera palabra: “COMENZAR” para “FINALIZAR” el desplazamiento de la palabra.

body { overflow: hidden; } 

http://www.bootply.com/TZebvFEl3T (Actualicé el código de arranque con las restricciones requeridas).

  

BEGIN

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

...

END

ACTUALIZACIÓN 2:

Experimentando con sus respuestas y mi propia investigación Logré algo que está cerca de trabajar para mí, tengo un desplazamiento para el div con el contenido debajo del menú de navegación y ahora el contenido no se superpone.

El problema es que también tengo un pie de página fijo en la página, si cambio el tamaño de la ventana, el desplazamiento no está completamente visible y no puedo llegar al final de la lista porque está superpuesto al pie de página, por lo que no me deja ver Al final del rollo, si elimino el pie de página, obviamente esto es visible.

Pero tengo que ajustar mi desplazamiento para comenzar en la parte inferior del menú de navegación superior, y terminar en la parte superior de mi pie de página, como puede ver en el ejemplo, el problema aparece cuando cambia el tamaño del navegador.

Creo que estoy buscando algo como esto para mi contenedor, eche un vistazo al siguiente enlace:

Contenido con un 100% entre el encabezado y el pie de página

Y aquí está mi código:

http://www.bootply.com/knJkGoEHWQ

HTML:

  

BEGIN

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

...

END

CSS:

 /* CSS used here will be applied after bootstrap.css */ body, html { height: 100%; overflow: hidden; padding-top: 44px; } .my-own-style { margin-left: 37px; margin-top: 37px; } .scroll { overflow: auto; height: 80%; padding: 0; margin-left: 37px; } 

ACTUALIZACIÓN 3 (SOLUCIÓN):

Ok, con respecto a la actualización 2, el problema fue tan simple de solucionar, quizás no lo vi. Básicamente de la misma manera que agregué un relleno en la parte superior del cuerpo para colocar mi contenedor principal debajo del menú de navegación superior, tengo que hacer exactamente lo mismo pero con el relleno inferior del cuerpo para establecer mi contenedor principal sobre la navegación inferior menú.

Además, configuro la altura al 100% para mi contenedor principal, de esa forma se expande a lo largo de todo el div que lo contiene.

Aquí está la solución:

http://www.bootply.com/sazMMHNCGy

HTML:

  

BEGIN

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

...

END

CSS:

 /* CSS used here will be applied after bootstrap.css */ body, html { height: 100%; overflow: hidden; padding-top: 44px; padding-bottom: 25px; } .my-own-style { margin-left: 37px; margin-top: 37px; } .scroll { overflow: auto; height: 100%; padding: 0; margin-left: 37px; } 

Y para mí esta es la solución que estaba buscando.

Realmente no me gusta tener que agregar elementos que están ahí para impulsar el contenido. Esto es lo que el posicionamiento está diseñado para manejar. La mejor manera de hacerlo es comenzar agregando relleno a la parte superior de su cuerpo, como @davidg indicó en su respuesta. Además, para mover su barra de navegación a su posición, no use márgenes. En cambio, usa las propiedades superior, izquierda y derecha. La clase navbar-fixed-top ya establece la posición como fija, por lo que no es necesario dar ningún valor de propiedad de posición. También agregué la clase container-fluid a su div (para que pueda obtener algo de relleno dentro) y una clase personalizada desplazable para establecer la propiedad de overflow.

MANIFESTACIÓN

CSS:

 html, body { height: 100%; /*Fixes the height to 100% of the viewport*/ } body { padding-top: 87px; /*50px for the height of the navbar + 37px for the offset*/ padding-bottom: 50px; /*50px for the height of the bottom navbar*/ } .navbar-offset { top: 37px; /*Offsets the top navbar 37px from the top of the viewport*/ } .container-fluid.scrollable { height: 100%; /*Sets the scrollable area to 100% of the viewport*/ overflow: auto; /*Allows the scrollable area to have a scrollbar based on the height of its content*/ background: #ccc; } 

HTML:

  

BEGIN

Hi World

...

END

De la documentación de Bootstrap :

Se requiere acolchado corporal La barra de navegación fija se superpondrá a su otro contenido, a menos que agregue relleno a la parte superior del . Pruebe sus propios valores o use nuestro fragmento a continuación. Consejo: de forma predeterminada, la barra de navegación tiene 50 px de alto.

Así que solo agrega el relleno de tu cuerpo:

 body { padding-top: 70px; } 

Si no desea que su cuerpo se desplace por detrás de la barra de navegación, cambie su CSS para usar relleno en lugar de margen:

 .my-own-style { padding-left: 37px; padding-top: 37px; } 

Debería desplazar el div desplazable con un div fijo antes de él:

http://www.bootply.com/3UpMI5yTIA

 .scroll-pre { height: 100px; width: 100%; background-color: inherit; position: fixed; } 

Y html:

  

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

Hi World

EDITAR

http://www.bootply.com/CKD9nrQxG5

Si desea desplazarse por el div (no en la página), agregue la clase “scroll” a su div desplazable y actualice css con:

 body, html { overflow: hidden; height: 100%; } .scroll { margin-top: 100px; // Same as .scroll-pre height overflow: auto; height: 100%; } 

EDIT 2 (pie de página)

http://www.bootply.com/JwmaWgvWPI

Si quieres un pie de página, la estrategia es la misma, coloca un div fijo en la bottom:0 . De nuevo, solo funcionará si coloca un fondo en los divs previos al desplazamiento y al pie de página.

Ajusté los botones del pergamino para que el último elemento sea visible.

 .scroll { margin-top: 100px; overflow: auto; height: 100%; padding-bottom:130px; margin-bottom: 30px; } .footer { position:fixed; bottom:0; height:30px; background:inherit; width:100%; } 

simplemente puede arreglar esto actualizando sus márgenes en rellenos … y actualizar el div como el siguiente …

HTML

 
....

CSS

 #content{ position:absolute; top:100px; } 

Manifestación

Puedes probar los siguientes códigos:

Código HTML:

  

Código CSS:

 .navbar{ border-radius: 0; }