0

I've already looked at a few examples, but still can't seem to figure this one out... is there a way to fill the rest of the page with a div using Angular Material without using calc?

I've been able to get the bottom div to fill the rest of the page fine by using 'calc()` to determine the remaining height, but now the first column's height is subject to change (400px, 200px, 0px) so I need to find a way to do it without having to use calc.

My page setup is basically: navbar (fixed height), first column (height subject to change), second column (should fill the rest of the page - though content length is subject to change so should have scrollbar for content only on the content (excluding the headers) and not the entire div).

HTML:

  <div layout="column" layout-fill>
     <md-toolbar>
       toolbar
     </md-toolbar>

     <div class="main">
        <div style="height:100%" layout-fill>
          <div flex layout="column" class="firstColumn">
            <div class="header1">
              first column header 1
            </div>
            <div class="header2">
              first column header 2
            </div>
            <div>
            first column content
            </div>
          </div>
          <div flex layout="column" class="secondColumn">
            <div class="header3">
             second column header 1
            </div>
            <div class="header4">
              second column header 2
            </div>
            <div>
            second column content:
            could be really really long, or really really short...
            needs a scrollbar if long, and for the background to still fill the page if not long.
            </div>

          </div>
        </div>
     </div>
  </div>

CSS:

.main {
  height: calc(100%-64px);
}

.md-toolbar {
  background-color: black;
  height: 64px;
}

.firstColumn {
  height: 200px;
  background-color:green;
}

.secondColumn {
  background-color:red;
}

.header1, .header3 {
  height: 64px;
}

.header2, .header4 {
  height: 28px;
}

Woking Code: JSFiddle

Kyle Krzeski
  • 6,183
  • 6
  • 41
  • 52

3 Answers3

1

You were nearly there. You just had to set your body to take all the width and height (and set it to position: relative), and then your main container to fill into all that space (using the trick position: absolute with top: 0, bottom: 0, right: 0 and left: 0).

Then, your container is displaying its children in a column layout, and the second column is being flex'd to take the remaining space. I added an overflow: auto to enable scrolling whenever its content is too large.

(I think I have updated your Fiddle, sorry) Here is a forked Fiddle.

SinDeus
  • 516
  • 1
  • 6
  • 21
0

I'm quite old school when it comes to layouts, so I don't use angular material or any fancy display properties to do these things, so I'm not sure this is what you're looking for.

What I usually do to accomplish these things is to use absolute positions and setting the top/bottom properties. I removed all material related tags in your fiddle code and created a solution where secondColumn is always below firstColumn. I hope you can find inspiration from it and integrate it into the material design.

I created a myfill class that I use instead of the layout-fill attribute, and used the following css: 

.myfill {
  position: absolute;
  bottom: 0;
  top: 0;
  width: 100%;
}

.firstColumn {
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
}

.secondColumn {
  background-color: red;
  bottom: 0;
  top: 200px;
  position: absolute;
  overflow-y: auto;
  width: 100%;
}

https://jsfiddle.net/p3huzaeq/

ShamPooSham
  • 2,301
  • 2
  • 19
  • 28
-1

You could use height: 100vh; instead of height: calc(100%-64px);

Renstrah
  • 46
  • 1
  • 8
  • That's actually what I am doing, though that doesn't fix the problem. The mockup I made was slightly incorrect, just changed it to reflect vh. Either way though, the last column won't take up the remaining height as even if the first column has a vh of let's say 60, the second column still just adjusts to the content and doesn't fill the page. I can't just set the vh of the second column as the first column can be hidden / change size. That's why I'm trying to find a way that will make the second column take up the rest of the space on the page regardless of the size of what's above it. – Kyle Krzeski Jul 20 '17 at 13:24