My current project involves utilizing Bootstrap to design a webpage featuring two fixed sidebars and a footer. Although I have successfully positioned the sidebars and footer, I am encountering issues with preventing the #content section from overlapping them.
Goal: To dynamically adjust the width and height of the content based on the sidebar width and footer height.
For reference, an example using Bootstrap JS can be found here:
Below is the HTML and CSS code snippet:
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
footer {
color: red;
}
.sidebar {
position: fixed;
top: 0;
height: 100vh;
z-index: 999;
transition: all 0.3s;
color: red;
}
#left-sidebar {
left: 0;
min-width: 300px;
max-width: 300px;
}
#right-sidebar {
right: 0;
min-width: 420px;
max-width: 420px;
}
#content {
width: 100%;
padding: 20px;
height: 100vh;
transition: all 0.3s;
background: #011627;
}<body>
<div class="wrapper">
<nav id="left-sidebar" class="sidebar">
<p>
Banner
</p>
<p>
Foo
</p>
</nav>
<div id="content">
<h1 class="title">
Page title
</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
...
</div>
<nav id="right-sidebar" class="sidebar">
<p>
ToC
</p>
<p>
Bar
</p>
</nav>
<footer class="fixed-bottom">
Fancy Footer <br/><br/>
</footer>
</div>
</body>