Skip to content

Instantly share code, notes, and snippets.

@alessandro-molari

alessandro-molari/fit_content_style.scss

Created November 9, 2014 10:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alessandro-molari/704ef4af6409cf3523ca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alessandro-molari/704ef4af6409cf3523ca to your computer and use it in GitHub Desktop.
Download ZIP
Children will fill all of the available viewport space (also vertically!)
Raw
fit_content_style.scss
html {
width: 100%;
height: 100%;
&>body {
width: 100%;
height: 100%;
&>.content {
display: table;
width: 100%;
height: 100%;
&>* {
display: table-row;
}
}
}
}
@alessandro-molari
Copy link
Author

alessandro-molari commented Nov 9, 2014

You should also set the height in the .content children.

Two-children example:

  • The first has: height: 20%;
  • The second don't specify height so he fills the available viewport space

Three-children example:

  • The first has: height: 30%;
  • The second don't specify height so he fills the available viewport space
  • The third has: height: 10%;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment