it-swarm.com.de

bootstrap 3.0 - Seitenleiste in voller Länge

Ich versuche, Bootstrap-Divs auf volle Körperlänge zu bringen. 

Das habe ich bisher ausprobiert: http://jsfiddle.net/bKsad/315/

html, body {
    min-height: 100%
}
.wrap {
    height: 100%
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    min-height:100% !important;
    position:relative;
}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

Da die rechte Spalte länger wird, möchte ich, dass die Seitenleiste dasselbe tut. 

18
black_rabbit

Der Schlüssel ist, die von Bootstrap 3 bereitgestellten "col-md-x" - und "col-md-offset-x" -Stile zu verstehen:

<div class="container-fluid">
 <div class="row">
  <div class="col-md-3 sidebar">
   Sidebar Content
  </div>
  <div class="col-md-9 col-md-offset-3 content">
   Main Content
  </div>
 </div>
</div>

Verwenden Sie dann CSS, um sicherzustellen, dass die Haltepunkte aufeinander abgestimmt sind. Sie müssen die Polsterung/den Rand für Ihre speziellen Anforderungen fein abstimmen, aber die Versatz- und @media-Haltepunkte behandeln das Gesamtlayout ziemlich gut:

html, body, .container-fluid, .row {
    height: 100%;
}

.sidebar {
  background-color: #CCCCCC;
}

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    background-color: #CCCCCC;
  }
}

Arbeitslösung: http://www.bootply.com/111837

Wenn Sie "col-sm-x" oder "col-lg-x" verwenden, ändern Sie einfach das @media CSS in die entsprechende min-Breite (768px für sm und 1200px für lg). Bootstrap erledigt den Rest.

33
pjfamig

Ich habe das gelöst, indem ich ein absolut positioniertes div und ein bisschen jQuery verwendet habe. Ich habe eine Bootstrap-Navbar mit einer festen Höhe von 50px. Deshalb werden im Code die 50er angezeigt. Sie können dies entfernen, wenn Sie keine Top-Navigationsleiste haben.

Diese Lösung arbeitet dynamisch mit jeder Höhe.

Das CSS:

.sidebar {
    background-color: #333333;
    position: absolute;
    min-height: calc(100% - 50px);
}

Die jQuery:

var document_height = $(document).height();
var sidebar = $('.sidebar');
var sidebar_height = sidebar.height();

if (document_height > sidebar_height) {
    sidebar.css('height', document_height - 50);
}

Das Schöne daran ist, dass der Hintergrund nicht flackert, da die minimale Höhe mit CSS angepasst wird, so dass die Größenänderung von jQuery, die normalerweise ein Flackern des Hintergrunds verursacht, beim Laden der Seite ausgeblendet wird.

1
kjdion84

Das einzige, was es für mich funktionierte (nach vielen Stunden, alles auszuprobieren) war 

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

Die Polsterung in Prozent hat es für mich getan. Jetzt geht es ganz bis zum Ende der Seite.

0
Yoko

ansatz 1: leeres div mit style = "clear: both" am Ende von wrap div . http://jsfiddle.net/34Fc5/1/

ansatz 2: http://jsfiddle.net/34Fc5/ :

html, body {
    height: 100%;
}
.wrap {
    height: 100%;
    overflow: hidden;
}
.sidebar {
    background-color:#eee;
    background-repeat: repeat;
    padding:0;
    height:100% !important;
    position:relative;

}
.sidebar .sidebar-content {
    height:100%;
    width:100%;
    padding: 5px;
    margin:0;
    position:relative;
}

hinzugefügt "overflow: hidden;" zu .wrap geänderte Höhe: 100% zu HTML, Körper geänderte Höhe: 100% zu .sidebar

bei Verwendung der CSS-Methode stimmt die Höhe der Seitenleiste nur mit dem Ansichts-Port des Browsers überein. Wenn Sie sich also Ansatz 1 anschauen, werden Sie beim Scrollen feststellen, dass der Hintergrund im Ansichtsfenster stoppt. um es zu beheben js ist erforderlich.

0
Shadow_boi