How to adjust a div to fit across the screen if there is not enough content for it

Navigation
0

Hello,

I'm using the Materialize freamework to create an administrative dashboard for a system I'm designing in PHP, but I know very little of the front end. I would like help setting the leftbar to fit across the screen if there is not enough content for that.

I tried to apply position fixed or absolute in CSS and somehow works, but it has some problems like: pagecontent ignores the leftbar and is superimposed and also in case the screen is small, the leftbar does not display the bar of scroll. I know I'm doing it the wrong way and so I'd like your help.

I put the project code in the JSFiddle to facilitate: link

@Edit

I'll explain again, I do not think I've been clear enough before.

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. It only occupies the size that your content allows you 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.

link

Thank you!

    
asked by anonymous 25.07.2017 / 05:37

2 answers

1

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

Example using the posted code (css file): 

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

Produces as a result:

    
27.07.2017 / 23:09
0

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>
    
27.07.2017 / 17:24
How to trigger button's Onclick event with jquery How to rewrite the apache URL with variable and then use other variables in PHP?