Bootstrapを倒したかった
Bootstrapで遊んでいて、よくある左側固定のメニューを作ろうとしていました。
<div class="col-3 bg-dark">で左側作って
<ul class="nav flex-column">で縦並びにして
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>とかなんとかしてそれっぽいものはできたのですが、思っていたのと違うじゃないか。
なぜそこで諦めた。
sassでしばく
仕方がないのでsassでしばいてやろうと思いました。sassでheight: 100%とかやりゃいけるやろ。
いけませんでした。意味がわからない。
(ちなみにsassはAtomにsass-autocompileをインスコしてセーブしたら自動でコンパイルしてくれるのがおすすめです。調べたらいくらでも出てきます)
いろいろ調べました
色々調べてみるとCSS3から使える魔法の単位vw(width用)とvh(height用)があるらしい。
なるほどとなったので、height: 100%をheight: 100vhとしてみました。
できました。