Width of the div

Question

I struggle to figure out how to set up the width of the content with side panel of fixed width. I need to have a side panel that has set width no matter the size of the screen and than the rest of the window taken by navbar, content and footer. I've been trying to achieve that for quite a while now using bootstrap grid and flex. But always at the end I end up with being forced to calculate the width of the content div. The best way so far was for me:


        
            
                {% include 'includes/sidebar.html' %}
            
            
                
                    
                        {% include 'includes/navigation.html' %}
                    
                
                
                    {% block content %}{% endblock content %}
                
                
                    
                        {% include 'includes/footer.html' %}

and it works fine but my footer is stuck right under the content block. I need either to make sure that the content block always takes min height 100% but

min-height: 100%;
height: 100%;

doesn't seem to do anything

Or I need to "fix" footer at the bottom with

position: absolute;
bottom: 0;

but it shorten the footer and requires me to calculate the width. If I simply do width: 100% it takes the width of the screen and because of the side panel overflows the screen to the right. So I need to do something like: width: 100%-$sidepanel-width where sidepanel-width in my case is 70px; but it requires consistent units so would either be: width: 1330px-$sidepanel-width or width: 100%- $sidepanel-width-in-%

Neither of which works in my case as width of the window needs to have dynamic width and my side panel fixed width.

What is the way to do this? I feel like I'm overcomplicating this.

user_10749726 · Answer

I hope I understand your problem and my answer can solve it.
using grid and min-height: 100vh we can do it.

.main_page{
  display:grid;
  grid-template-columns:70px repeat(2,minmax(0, 1fr));
  grid-template-rows:1fr 5fr 1fr;
  grid-template-areas:
    "s n n"
    "s c c"
    "s f f";
  min-height:100vh;
}
.sidebar{
  grid-area:s;
  background:red;
}
.navbar{
  grid-area:n;
  background:blue;
}
.content{
  grid-area:c;
  background:green;
}
.footer{
  grid-area:f;
  background:gold;
}


  side bar
  
      navbar
    
    content
    
      footer

Width of the div

1 Answers