Poner div debajo de la barra de navegación y no se superponen contenido

Mi problema es que me fijo de una barra de navegación en la parte superior de mi página web y que incluye tanto a los márgenes laterales y superior. Debajo de esta barra de navegación, quiero establecer una desplazable contenedor.

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 se quiere poner debajo de la superposición de la barra de navegación y se muestra, además de la barra de navegación. Para una mejor explicación de esto puedo entregar mi código, y un ejemplo vivo:

ACTUALIZACIÓN: he notado algo que aumenta un poco la difícil desde mi punto de vista, y es que el cuerpo tiene una regla para ocultar el desplazamiento y no deja de desplazamiento arriba/abajo:

Me gustaría simplemente para desplazarse sobre el contenido de “Hola Mundo” y, obviamente, de que todo el contenido se muestra a partir de la primera palabra: “COMENZAR” a “FINAL” de la palabra de desplazamiento.

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T (He actualizado el bootply código con el restictions).

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="divider-vertical"></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Options</a></li>
   </ul>
</nav>

<div>
    <p>BEGIN</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
       Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

ACTUALIZACIÓN 2:

Experimentando con sus respuestas y mi propia investigación, he conseguido algo que está cerca de los que trabajan para mí, tengo un desplazamiento para el div con el contenido a continuación el menú de navegación y ahora el contenido no se superponen.

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

Pero tengo que ajustar mi desplácese a inicio en la parte inferior de la parte superior de navegación de menú, y al final en la parte superior de mi pie como se puede ver en el ejemplo, el problema aparece cuando cambiar el tamaño del navegador.

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

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

Y aquí está mi código:

http://www.bootply.com/knJkGoEHWQ

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="container-fluid scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ... 
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

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;
}

UPDATE 3 (SOLUCIÓN):

Aceptar con respecto a la update 2, el problema era tan simple para resolverlo, tal vez yo no lo vea.
Básicamente de la misma manera he añadido un relleno en la parte superior del cuerpo para establecer mi principal contenedor debajo del menú de navegación superior, que tengo que hacer exactamente lo mismo pero con el margen inferior del cuerpo para establecer mi contenedor principal por encima de la parte inferior del menú de navegación.

Por otra parte, me puse a la altura del 100% para mi contenedor principal en que la forma en que se expanden a lo largo de todo el div que lo contiene.

Aquí está la solución:

http://www.bootply.com/sazMMHNCGy

HTML:

<nav class="navbar navbar-default navbar-fixed-top my-own-style">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="divider-vertical"></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</nav>

<div class="scroll">
    <p>BEGIN</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    Hi World
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    <p>Hi World</p>
    ...
    <p>END</p>
</div>

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">More</a></li>
     <li><a href="#">Options</a></li>
      </ul>
</div>

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.

OriginalEl autor Joe Lewis | 2014-10-16

5 respuestas

  1. 7

    Realidad no me gusta tener que agregar elementos que sólo están ahí para fines de empujar el contenido de todo. Esto es lo que el posicionamiento está diseñado para manejar. La mejor manera de hacer esto es comenzar por la adición de relleno en la parte superior de su cuerpo, como @davidg afirmó en su respuesta. Además, para mover a tu barra de navegación en la posición, no utilice márgenes. En lugar de utilizar la parte superior, izquierda y derecha propiedades. La navbar-fixed-de clase superior, ya establece la posición fija, de modo que usted no necesita dar ninguna posición de valor de la propiedad. También he añadido el contenedor del líquido de la clase a su div (para que tengas algo de relleno en el interior) y una clase personalizada de desplazamiento para establecer la propiedad overflow.

    DEMO

    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:

    <nav class="navbar navbar-default navbar-fixed-top navbar-offset">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </nav>
    
    <div class="container-fluid scrollable">
        <p>BEGIN</p>
        <p>Hi World</p>
    
        ...
    
        <p>END</p>
    </div>
    
    
    <nav class="navbar navbar-inverse navbar-fixed-bottom">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li>
        </ul>
    </nav>
    Si usted podría revisar mi ACTUALIZACIÓN 2 te lo voy a agradecer, a causa de la adaptación de la solución y el resto de los participantes en este hilo casi he llegado a mi meta, pero todavía tengo algunos problemas de cambiar el tamaño del navegador.
    Actualizado el Bootply… creo que eso es lo que quería.

    OriginalEl autor

  2. 8

    De la La documentación de Bootstrap:

    Cuerpo de relleno requerido La barra de navegación fija superponer otro contenido, a menos que usted agregar relleno a la parte superior de la <body>. Pruebe sus propios valores o utilice nuestro siguiente fragmento. Sugerencia: de forma predeterminada, la barra de navegación, es 50px de alto.

    Tan sólo tiene que añadir su cuerpo relleno:

    body
    {
        padding-top: 70px;
    }

    Si usted no desea que su cuerpo para desplazarse detrás de la barra de navegación, cambiar tu CSS para el uso de relleno en lugar de margen:

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

    OriginalEl autor

  3. 3

    Debe desplazar el desplazamiento div con un div:

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

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

    Y html:

    <nav class="navbar navbar-default navbar-fixed-top my-own-style">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </nav>
    <div class="scroll-pre"></div>
    <div class="scroll">
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
        <p>Hi World</p>
           Hi World
        <p>Hi World</p>
    </div>

    EDITAR

    http://www.bootply.com/CKD9nrQxG5

    Si desea desplazarse en el div (no en la página), a continuación, añadir la clase “scroll” para su desplazamiento div y actualización de css con:

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

    EDICIÓN 2 (pie de página)

    http://www.bootply.com/JwmaWgvWPI

    Si quieres un pie de página, la estrategia es la misma, lugar fijo div en bottom:0. De nuevo, esto sólo funcionará si se coloca un fondo para la pre-desplazamiento y pie de página divs.

    He ajustado el paddigns de desplazamiento para permitir 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%;
    }
    El problema es que he notado que el cuerpo tiene que tener algo que esconde el libro y que se ha hecho con overflow: hidden; la regla, por lo que hace que no puede desplazarse a través del sitio (me gustaría simplemente para desplazarse sobre “Hola mundo” de contenido, no la página entera.
    He actualizado la respuesta a establecer el div de desplazamiento (no de la página)
    Está bastante cerca de lograr lo que quiero, lo único es que no llega el último elemento de desplazamiento y además si quiero reducir la longitud de la barra de desplazamiento debido a que tengo un pie de página o algo, no funcionaría. Cualquier consejo acerca de esto?
    Esta es la razón por la que mi respuesta obras.
    Actualizada la respuesta con el pie de página.

    OriginalEl autor

  4. 2

    usted puede simplemente obtener esta fijado por la actualización de sus márgenes para rellenos.. y actualizar el div como la de abajo..

    HTML

    <div id="content">....</div>

    CSS

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

    Demo

    OriginalEl autor

  5. 0

    Usted puede intentar los siguientes códigos:

    Código HTML:

    <nav class="navbar navbar-default">
    .......
    </nav>

    Código CSS:

    .navbar{
    border-radius: 0;
    }

    OriginalEl autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *