it-swarm.dev

bootstrap 3.0 pełnej długości boczny pasek ciała

Próbuję uzyskać divy bootstrap do pełnej długości ciała. 

Oto, co próbowałem do tej pory: 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;
}

Gdy prawa kolumna wydłuża się, chcę, aby pasek boczny zrobił to samo. 

18
black_rabbit

Kluczem jest zrozumienie stylów „col-md-x” i „col-md-offset-x” udostępnianych przez Bootstrap 3:

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

Następnie użyj CSS, aby upewnić się, że kolejność punktów przerwania. Musisz dostosować dopełnienie/margines do swoich potrzeb, ale punkty przerwania offset i @media całkiem dobrze radzą sobie z ogólnym układem:

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

Rozwiązanie robocze: http://www.bootply.com/111837

Jeśli używasz „col-sm-x” lub „col-lg-x”, po prostu zmieniasz @media CSS na odpowiednią minimalną szerokość (768px dla sm i 1200px dla lg). Bootstrap obsługuje resztę.

33
pjfamig

Rozwiązałem to, używając absolutnie pozycjonowanego div i trochę jQuery. Mam pasek nawigacyjny Bootstrap o stałej wysokości 50px, dlatego właśnie widzisz lata 50-te w kodzie. Możesz to usunąć, jeśli nie masz górnego paska nawigacyjnego.

To rozwiązanie działa dynamicznie na dowolnej wysokości.

CSS:

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

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

Niezła rzecz w tym, że nie będzie migotania tła, ponieważ używa CSS do regulacji wysokości minimalnej, tak że zmiana rozmiaru jQuery, która normalnie powoduje migotanie tła, będzie ukryta na stronie ładowania.

1
kjdion84

Jedyną rzeczą, która zadziałała dla mnie (po wielu godzinach próbowania wszystkiego) była 

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

CSS padding-bottom: 100%;

Wyściółka w procentach zrobiła to dla mnie. Teraz idzie do samego końca strony.

0
Yoko

podejście 1: dodano pusty div z style = "clear: both" na końcu zawijania div . http://jsfiddle.net/34Fc5/1/

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

dodano „przepełnienie: ukryte”; do .wrap zmieniono wysokość: 100% na html, body zmieniono wysokość: 100% na .sidebar

przy użyciu sposobu css wysokość paska bocznego będzie zgodna tylko z portem widoku przeglądarki. więc jeśli spojrzysz na podejście 1, podczas przewijania zauważysz stop tła w rzutni. naprawić to js jest wymagane.

0
Shadow_boi