Jak ustawić kolumnę siatki Bootstrap na pełną wysokość strony?

Próbuję utworzyć pasek boczny za pomocą siatki Bootstrap, ale chcę, aby rozciągał się aż do samego dołu. Image of what I am trying to accomplish.Jak ustawić kolumnę siatki Bootstrap na pełną wysokość strony?

Nie chcę zrujnować reakcji i unikać rozwiązań JavaScript, jeśli to możliwe.

Kod:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
     /* Footer CSS */ 
     html { 
      position: relative; 
      min-height: 100%; 
     } 
     body { 
      margin-bottom: 60px; 
     } 
     .footer { 
      position: absolute; 
      bottom: 0; 
      width: 100%; 
      height: 60px; 
      background-color: #3e8f3e; 
     } 
    </style> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-10" style="background-color: #f5e79e"> 
       Column that does not need to stretch 
      </div> 
      <div class="col-md-2" style="background-color: #ffff00;"> 
       Sidebar/column to stretch down to the bottom (to the footer) 
      </div> 
     </div> 
    </div> 

    <footer class="footer"> 
     <div class="container-fluid"> 
      <h5>Footer to reach down too</h5> 
     </div> 
    </footer> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</body> 
</html>

Kod jest również dostępna na jsfiddle.net który prawdopodobnie będzie dużo łatwiej pracować. Należy przeciągnąć wyniki, aby witryna nie wyświetlała wersji mobilnej z kolumnami pod sobą.

Każda pomoc jest doceniana, ponieważ od wieków utknąłem na tym problemie.

Źródło

2017-01-24 Zacy5000

dlaczego w dół w mojej odpowiedzi? –

@RayKoren Nie odpowiedziałem na twoją odpowiedź. – Zacy5000

Czy pasek boczny działa jako menu nawigacyjne? – grvpanchal

zorientowali się dość proste rozwiązanie. Dziękuję wszystkim, którzy odpowiedzieli na pomoc. Kredyty dla Gerardo Sabetta za sugestię użycia "wysokość: 100vh".

Oto roztwór roboczy na JSFiddle: click me.

Co zrobiłem

Korzystanie z funkcji Calc i pozycji absolutnej mogę dokonać pasek boczny wypełnić wysokość strony bez dokonywania przewijania niepotrzebnie i trzymaj go responsywnie za pomocą @media w CSS.

Kod I dodaje

@media (max-width: 992px) { 
    .sidebar-grid { 
     position: relative; 
    } 
} 

@media (min-width: 992px) { 
    .sidebar-grid { 
     height: calc(100% - 50px - 60px); 
     position: absolute; 
     right: 0; 
    } 
}

z bocznego- "siatkę", będącej w klasie sieci (na przykład. "Col-MD-3 bocznym, siatki").992px to średni rozmiar pulpitu dla Bootstrap i jest, gdy kolumny się stosują (gdy okno ma mniejszy rozmiar 992px) z powodu col-md-3. Jeśli był to col-lg-3, to 992px powinno wynosić 1200px. Wszystkie te rozmiary są z the Bootstrap documentation. 50px i 60px to rozmiar navbara i stopki.

Proszę o komentarz, jeśli uważasz, że zrobiłem coś złego.

Źródło

2017-01-30 01:18:16 Zacy5000

Cieszę się, że mogę Ci pomóc! –

-1

cóż ... w twoim kodzie są pewne rzeczy, które nie pozwolą, by pasek boczny rozwijał się tylko o css ... pierwszy pasek boczny i pasek nawigacji znajdują się w rzędzie i pojemniku, który zamyka je w jednym div, które zamykają je jako pudełko lub coś takiego ... tak ... nawet jeśli podasz wysokość paska bocznego: 100% nic nie wpłynie ... wydzielona stopka ma szerokość 100%, a także deklaruje określoną wysokość dla to znowu nie pomoże ci napisać wysokości 100% na pasku bocznym. Naprawdę radzę użyć JS dla paska bocznego, istnieje również wiele przykładów dla pełnego w bootstrapu, skomentuj mi, jeśli chcesz mieć łącze dla przykładu lub coś, co to jest

Źródło

2017-01-24 23:31:39

-1

To, co zrobiłem, to wyjęcie paska bocznego z głównym rzędzie i unosił go w prawo. Ustawiam także pozycję stopki na względną.

 /* Footer CSS */ 
 
     html { 
 
      position: relative; 
 
      min-height: 100%; 
 
     } 
 
     body { 
 
      margin-bottom: 60px; 
 
     } 
 
     .footer { 
 
      position: relative; 
 
      bottom: 0; 
 
      width: 100%; 
 
      height: 60px; 
 
      background-color: #bce8f1; 
 
     } 
 
     body,html,.row-offcanvas { 
 
    height:100%; 
 
} 
 

 
body { 
 
    padding-top: 50px; 
 
} 
 

 
#sidebar { 
 
    width: inherit; 
 
    min-width: 220px; 
 
    max-width: 220px; 
 
    background-color:#f5f5f5; 
 
    float: right; 
 
    height:100%; 
 
    position:relative; 
 
    overflow-y:hidden; 
 
    overflow-x:hidden; 
 
} 
 
#main { 
 
    
 
    overflow:auto; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">NavBar</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 
    <div class="container-fluid"> 
 
<div id="sidebar" class="col-md-2" style="background-color: #ffff00;"> 
 
       <div class="col-md-12"> 
 
     <h3>Sidebar</h3> 
 
     <ul class="nav nav-pills nav-stacked"> 
 
      <li class="active"><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
      <li><a href="#">Section</a></li> 
 
     </ul> 
 
     </div> 
 
      </div> 
 
     <div id="main" class="row"> 
 
      <div class="col-md-10" style="background-color: #f5e79e"> 
 
       Column that does not need to stretch 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 

 
    <footer class="footer"> 
 
     <div class="container-fluid"> 
 
      <h5>Footer to reach down too</h5> 
 
     </div> 
 
    </footer>

Źródło

2017-01-24 23:44:08

To dobrze, ale problem polega na tym, że jeśli użytkownik jest w telefonie (lub małym oknie), pasek boczny nie będzie reagował (np. Nie będzie się układał pod kolumną), co stanowi problem, ponieważ na telefonie będzie wszyscy są stłoczeni. Ale dzięki i tak – Zacy5000

@ Zacy5000 Ah Dziękuję, kolego! Nie zdawałem sobie sprawy, że chciałeś, żeby to się zawaliło. Wszystko dobrze! –

Mam dwie opcje, aby przejść do przodu:

Jeśli chcesz mieć pasek boczny z siatki a następnie użyć .container-table obrębie układu elastycznego korzystania bootstrap-essentials: jsfiddle.net/grvpanchal/1k1wdu8u
Jeśli chcesz mieć responsywny pasek boczny .navmenu jak zastosowania tego: jsfiddle.net/grvpanchal/g6kxjxuo

Źródło

2017-01-26 07:56:44 grvpanchal

Jak ustawić kolumnę siatki Bootstrap na pełną wysokość strony?

Odpowiedz

Powiązane problemy