I have a webpage with four components.
- Top Navigation
- Sidebar
- Footer
- Main content
My goal is to have the Top Navigation fixed at the top, the footer fixed at the bottom, and the sidebar to stick to the left with full height.
To achieve this layout, I have created a plunker, which can be viewed here. When the plunker is run in full screen, it causes the sidebar to collapse to its actual height.
Here is the code snippet:
/* Styles go here */
body, html {
height:100%;
}
@media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
HTML
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
...