css - ブラウザの高さで div のサイズを変更する

Question

div をブラウザの高さ - 40px にするにはどうすればよいですか?

それが簡単なら、どうすれば div を (ブラウザの高さ) - (要素がページのどこから始まるか) - (40px) にすることができますか?

CSSのみが理想です。JavaScriptでこれを行うのは簡単ですが、それが悪い形式であることは誰もが知っています:)

Answer 1

下部にパディングを使用できます。

selector {
   position:absolute;
   ....
   height:100%;
   padding-bottom:40px;
}

Answer 2

div {
    height: calc(100% - 40px);
}

JS を使用せずに「要素がページのどのくらい下にあるのか」という情報を取得する方法はないと思います。

Answer 3

div をブラウザ ウィンドウの高さ 100% にする

body,html{
  height:100%;
}

div#right{
  height:100%
}

また、パディングを追加することもできます。