-1

I want to expand the .content which is of blue-ish colour to the bottom of the screen. I have tried 

.content {
  height: 100%;
}

html {
  height: 100%
}

Full code here: https://jsfiddle.net/39v5ehwx/

Please check it after expanding the window size to full you will see that the bluish content area doesn't stretch to the bottom. Inside the .content the height only works in pixels

coops
  • 1,678
  • 1
  • 13
  • 26
vlksie
  • 1
  • 4
  • 2
    Please create a [mcve] in the question itself and don't expect us to debug your full code – Pete Apr 17 '19 at 14:35
  • Make sure every parent element also has 100% height, up to and including `body|html` - Either that, or `100vh`. Percentages are a _relative_ unit, meaning they have to be a percentage _of something_. **Note** It looks like you have a toolbar at the top - neither 100% or 100vh are a good fit for you since you'll have some overflow at the bottom (the height of the toolbar). You can combine both units with [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) if you know the height of the toolbar. – Lewis Apr 17 '19 at 14:39
  • Possible duplicate of [How to make a div 100% height of the browser window?](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) – Adam Jenkins Apr 17 '19 at 14:48

1 Answers1

0

Looking at your jsfiddle, you need to make the parent element 100vh, then you can do some work with display:flex on the other elements.

Replace height:100% on .wrapper with:

.wrapper {
    /* height: 100% */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

Then, replace min-height: 100% with flex: 1. This will stretch this element the full height of the remaining space (this works along with display:flex on the parent):

.content-wrapper {
  /* min-height: 100%; */
  flex: 1;
}
coops
  • 1,678
  • 1
  • 13
  • 26
  • using height 100vh causes double vertical scroll bars i.imgur.com/bu5fFiK.jpg – vlksie Apr 17 '19 at 15:28
  • @vlksie Do you need the `.content` to be scrollable? and the rest to stay in place? I will edit my answer once I know a little more. – coops Apr 18 '19 at 07:17