Joe Consterdine Joe Consterdine - 29 days ago 7
CSS Question

Stretch container to bottom but allow it to extend if more content

I'm looking for a better to solution to the problem of not having enough content to fill the screen.

Usually if you want to fill the screen you either make the html, body heights 100% and then your container 100% or just use 100vh like in my JSFiddle below.

The problem is if the content does eventually stretch past 100% height of the screen it gets cut off.

I was wondering if there was a way (maybe with flexbox) where you could 100% height but also if the content goes past 100% the container expands in size.

HTML:

<div class="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>


CSS:

html, body {
padding: 0;
margin: 0;
}
.content {
background: grey;
// height: 100vh;
}


https://jsfiddle.net/31bmgdxr/

Answer

Use a container around the content to which you apply 100vh and display: flexand now the content can be made a column flexbox - see demo below and updated fiddle:

html,
body {
  padding: 0;
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  display: flex;
}

.content {
  background: grey;
  display: flex;
  flex-direction: column;
}
<div class="wrapper">
  <div class="content">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>