web-dev-qa-db-de.com

Setzen Sie div unter der Navigationsleiste und überlappen Sie den Inhalt nicht

Mein Problem ist, dass ich oben auf meiner Webseite eine Navigationsleiste angebracht habe, die sowohl die seitlichen als auch die oberen Seitenränder enthält. Unter dieser Navigationsleiste möchte ich einen scrollbaren Container einstellen.

Angenommen, ich benutze Bootstrap 3.2.0, um die Site zu erstellen.

Das Problem ist, dass aufgrund der Ränder meiner Navigationsleiste die Inhalte, die ich unten einfügen möchte, die Navigationsleiste überlappen und dass sie neben der Navigationsleiste angezeigt werden. Zur besseren Erklärung gebe ich Ihnen meinen Code und ein Live-Beispiel:

UPDATE: Ich habe etwas bemerkt, das aus meiner Sicht etwas schwieriger wird, und der Körper hat eine Regel, um die Schriftrolle zu verbergen und nicht nach oben/unten scrollen zu lassen:

Ich möchte nur über den Inhalt "Hi World" blättern und natürlich, dass der gesamte Inhalt ab dem ersten Wort angezeigt wird: "BEGIN" bis "END".

body {
   overflow: hidden;
}

http://www.bootply.com/TZebvFEl3T (Ich habe den Bootply-Code mit den erforderlichen Einschränkungen aktualisiert).

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

UPDATE 2:

Beim Experimentieren mit Ihren Antworten und meiner eigenen Recherche habe ich etwas erreicht, was für mich schon bald in greifbarer Nähe ist. Ich habe eine Bildlaufleiste für das div mit dem Inhalt unter dem Navigationsmenü und jetzt überschneidet sich der Inhalt.

Das Problem ist, dass ich auch eine feste Fußzeile auf der Seite habe. Wenn ich die Größe des Fensters verkleinere, ist die Bildlaufleiste nicht vollständig sichtbar und ich kann das Ende der Liste nicht erreichen, da sie von der Fußzeile überlappt wird, sodass ich nicht sehen kann Das Ende der Schriftrolle ist offensichtlich sichtbar, wenn ich die Fußzeile entferne.

Aber ich muss meine Bildlaufleiste anpassen, um am unteren Rand des oberen Navigationsmenüs zu beginnen und am oberen Rand meiner Fußzeile zu enden, wie Sie im Beispiel sehen können. Das Problem tritt auf, wenn Sie die Größe des Browsers ändern.

Ich glaube, ich suche so etwas für meinen Container. Bitte schauen Sie auf den nächsten Link:

Inhalt mit 100% zwischen Kopf- und Fußzeile

Und hier ist mein Code:

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 (LÖSUNG):

In Bezug auf das Update 2 war das Problem so einfach zu lösen, vielleicht habe ich es nicht gesehen ... Im Grunde genommen habe ich auf die gleiche Weise eine Polsterung auf der Oberseite des Körpers hinzugefügt, um meinen Hauptcontainer unter die Oberseite zu setzen Im Navigationsmenü muss ich dasselbe tun, jedoch mit der unteren Auffüllung des Körpers, um meinen Hauptcontainer über dem unteren Navigationsmenü zu positionieren.

Außerdem stelle ich die Höhe für meinen Hauptcontainer auf 100% ein, so dass er sich entlang des gesamten Div, das ihn enthält, ausdehnt.

Hier ist die Lösung:

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

Und für mich ist dies die Lösung, nach der ich gesucht habe.

11
Joe Lewis

Ich mag es wirklich nicht, Elemente hinzufügen zu müssen, die nur dazu da sind, um Inhalte zu verschieben. Dies ist, wofür die Positionierung ausgelegt ist. Der beste Weg, dies zu tun, besteht darin, die Oberseite Ihres Körpers mit Padding zu versehen, wie @davidg in seiner Antwort feststellt. Verwenden Sie keine Ränder, um Ihre Navbar in Position zu bringen. Verwenden Sie stattdessen die Eigenschaften top, left und right. Die navbar-fixed-top-Klasse setzt die Position bereits auf fixed, sodass Sie keinen Positionseigenschaftswert angeben müssen. Ich habe auch die Container-Fluid-Klasse zu Ihrem div hinzugefügt (damit Sie etwas Auffüllung erhalten) und eine benutzerdefinierte Klasse, die scrollbar ist, um die Überlaufeigenschaft festzulegen.

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>
8
jme11

Aus der Bootstrap-Dokumentation :

Körperauffüllung erforderlich Die festgelegte Navigationsleiste überlagert Ihren anderen Inhalt, sofern Sie keine Auffüllung am oberen Rand des <body> hinzufügen. Testen Sie Ihre eigenen Werte oder verwenden Sie unser Snippet. Tipp: Die Navigationsleiste ist standardmäßig 50 Pixel hoch.

Fügen Sie einfach Ihre Körperpolsterung hinzu:

body
{
    padding-top: 70px;
}

Wenn Sie nicht möchten, dass Ihr Körper hinter der Navigationsleiste blättert, ändern Sie in Ihrem CSS die Auffüllung anstelle des Randes:

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

Sie sollten das Scroll-Div durch ein festes Div ersetzen:

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

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

Und 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>

EDIT

http://www.bootply.com/CKD9nrQxG5

Wenn Sie im div (nicht auf der Seite) scrollen möchten, fügen Sie die Klasse "scroll" zu Ihrem scrollenden div hinzu und aktualisieren Sie css mit

body, html {
  overflow: hidden;
  height: 100%;
}

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

EDIT 2 (Fußzeile)

http://www.bootply.com/JwmaWgvWPI

Wenn Sie eine Fußzeile wünschen, ist die Strategie dieselbe, platzieren Sie ein festes div in bottom:0. Wieder funktioniert es nur, wenn Sie einen Hintergrund für die Divs vor dem Blättern und der Fußzeile setzen.

Ich habe die Leerzeichen der Schriftrolle so angepasst, dass das letzte Element sichtbar ist.

.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%;
}
3
Miquel

sie können dieses Problem einfach beheben, indem Sie Ihre Ränder mit Paddings aktualisieren .. und das Div wie folgt aktualisieren.

HTML

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

CSS

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

Demo

2
Aru

Sie können die folgenden Codes ausprobieren:

HTML Quelltext:

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

CSS-Code:

.navbar{
border-radius: 0;
}
0
Nimesh Nayaju