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.
dlaczego w dół w mojej odpowiedzi? –
@RayKoren Nie odpowiedziałem na twoją odpowiedź. – Zacy5000
Czy pasek boczny działa jako menu nawigacyjne? – grvpanchal