How to adjust a div to fit across the screen if there isn’t enough content to do so

Question

Hello,

I’m using freamework Materialize to create an administrative panel for a system I’m creating in PHP, but I know very little about front-end. I would like help to adjust the leftbar to fit across the screen if there is not enough content for this.

I tried applying position Fixed or Absolute in CSS and it kind of works, but there are some problems like: pagecontent ignores the leftbar and is overlaid and also in case the screen is small, the leftbar does not display the scroll bar. I know I’m doing it the wrong way and that’s why I’d like your help.

I put the project code in Jsfiddle for ease: https://jsfiddle.net/88ctckn2/5/

@Edit

I’ll explain again, I guess I wasn’t clear enough earlier.

If you compare the image below with the project in Jsfiddle, you will see that it is very similar. The difference is that the leftbar does not occupy all the space on the screen in terms of height (height). It only occupies the size that its content allows it to occupy. If you add more content, it gets bigger. I wanted it to look like the image below, from the beginning to the end of the screen.

I think I’m still not clear enough, but just compare the project in Jsfiddle and the image below and you’ll see the differences. I want it to look like the image below.

https://jsfiddle.net/88ctckn2/5/

Thank you!

Answer 1

You can set the minimum height for your left bar, using the attribute min-height in class .left. To avoid overwriting of this property (by mterialize) use the !important.

Example using posted code (css file):

.leftbar {
    background-color: #263238;
    color: #f5f5f5;
    min-height: 100vh !important;
}

Produces as a result:

Answer 2

Using a structure see the reference below, it will work...

html,
body {
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 25%;
  height: 100%;
  background: gray;
  float: left;
}

.content {
  width: 75%;
}

.topbar {
  background: black;
  color: #fff
}

.main {
  background: red;
  color: #fff
}

<div class="container">
  <div class="sidebar">
    <p>Esta Barra Vai ocupar a tela toda e mais um pouco</p>
  </div>
  <div class="content">
    <div class="topbar">
      topbar
    </div>
    <div class="main">
      main content
    </div>
  </div>
</div>