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 #706
This commit is contained in:
parent
984f0dfda7
commit
3e347970c7
4 changed files with 25 additions and 1 deletions
|
@ -1,3 +1,9 @@
|
|||
## Unreleased
|
||||
|
||||
### Enhancements
|
||||
|
||||
- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
|
||||
|
||||
## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
|
||||
|
||||
### Enhancements
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -4,9 +4,15 @@ permalink: /docs/history/
|
|||
excerpt: "Change log of enhancements and bug fixes made to the theme."
|
||||
sidebar:
|
||||
nav: docs
|
||||
last_modified_at: 2017-07-07T15:45:45-04:00
|
||||
last_modified_at: 2017-07-12T11:57:08-04:00
|
||||
---
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Enhancements
|
||||
|
||||
- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
|
||||
|
||||
## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
|
||||
|
||||
### Enhancements
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue