Add vertical scrollbar to sidebars that extend outside the viewport

Viewing overflowing sidebar content requires scrolling the entire page which is annoying and causes the reader to lose their place.

Use CSS `calc` to approximate height of the sidebar (`100vh` - height of the masthead) and apply `overflow-y: auto` to add vertical scrollbars when needed.

Fixes 
This commit is contained in:
Michael Rose
2017-07-12 12:03:14 -04:00
parent 984f0dfda7
commit 3e347970c7
4 changed files with 25 additions and 1 deletions
CHANGELOG.md
_sass/minimal-mistakes
docs
_docs
_sass
minimal-mistakes

@ -22,6 +22,12 @@
&:hover {
opacity: 1;
}
&.sticky {
overflow-y: auto;
/* calculate height of nav list */
height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
}
}
@include breakpoint($x-large) {