CSS
Sass
bootstrap

Bootstrapのnavのheightの罠

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>とかなんとかしてそれっぽいものはできたのですが、思っていたのと違うじゃないか。

image.png

なぜそこで諦めた。

sassでしばく

仕方がないのでsassでしばいてやろうと思いました。sassでheight: 100%とかやりゃいけるやろ。

image.png

いけませんでした。意味がわからない。

(ちなみにsassはAtomにsass-autocompileをインスコしてセーブしたら自動でコンパイルしてくれるのがおすすめです。調べたらいくらでも出てきます)

いろいろ調べました

色々調べてみるとCSS3から使える魔法の単位vw(width用)とvh(height用)があるらしい。

なるほどとなったので、height: 100%height: 100vhとしてみました。

image.png

できました。