ある画面のエレメントを画面の高さ一杯に表示したい場合の方法です。たとえば画面のコンテンツが入っている要素が短いためにフッターが画面の途中まで上がってしまうようなケースを想定します。
このような場合、フッターは画面の一番下に張り付いて欲しいところです。コンテンツの高さを調整すれば良いのですが、画面の高さで調整する必要があります。
この場合は、CSSを以下の様に調整します。（CSS toolsで画面の読み込み時に以下のCSSをセットすれば良い）
1 2 3 4 5 | <style> #your-element-name { height: calc(100vh - 200px) !important; }</style> |
画面の高さ一杯が100vhなのでヘッダーなどの調整したい高さ分をオフセット（この場合は200px)して要素が画面一杯になるようにセットします。
高さを調整する要素のid attributeをyour-element-nameで指定した名前と同じに指定すればOKです。