I am facing challenges in determining the setup of the content width with a fixed side panel. I want the side panel to maintain a set width regardless of the screen size, while the rest of the window accommodates the navbar, content, and footer. I have been attempting to achieve this using bootstrap grid and flex properties, but I always find myself needing to calculate the width of the content div in the end. One approach that has worked for me so far is:
<div class="container-fluid main_page">
<div class="row">
<div class="col-md-1">
{% include 'includes/sidebar.html' %}
</div>
<div class="col">
<div class="row">
<div class="col-md-12">
{% include 'includes/navigation.html' %}
</div>
</div>
<div class="row content">
{% block content %}{% endblock content %}
</div>
<div class="row">
<div class="col-md-12">
{% include 'includes/footer.html' %}
</div>
</div>
</div>
</div>
</div>
While this setup works fine, my footer ends up stuck right under the content block. I am trying to either ensure that the content block always has a minimum height of 100% with:
min-height: 100%;
height: 100%;
However, this solution doesn't seem to have any effect. Alternatively, I can "fix" the footer at the bottom using:
position: absolute;
bottom: 0;
But this causes the footer to be cut off and requires me to calculate the width. Simply using width: 100% makes the content extend beyond the screen due to the side panel. So I need to implement something like:
width: 100%-$sidepanel-width where the side panel width is 70px;
but this requires consistent units, such as:
width: 1330px-$sidepanel-width
or
width: 100%- $sidepanel-width-in-%Neither of these solutions is working for me as the window width needs to be dynamic while the side panel remains fixed. I am looking for a simpler way to achieve this. What approach should I take to resolve this issue?