html - 体を押し下げて高さを変えるには？

Question

ボディタグをパディングでオフセットしようとしています。ただし、本体がブラウザーウィンドウの下に落ちてスクロールバーが表示されないように、本体を調整したいと考えています。

これが私が達成しようとしているものの例です: http://jsfiddle.net/jM9Np/1/

HTML:

<body> </body>

CSS:

html, body {
 height: 100%;   
}

body {
 margin-top: 20em;
 background-color: LemonChiffon;
}

理想的には、体の高さから 20em を引きたいと思います。Javascript を使用せずに、すべてのブラウザー (Internet Explorer を除く) でサポートされている方法でこれを行う方法はありますか? ありがとう。

score 2 · Accepted Answer

場合によります。ボーダーを使用できます、f.ex：

html {
  height: 100%
}

body {
  border-top: 20em solid #fff;
  background-color: LemonChiffon;
}

しかし、私見の最善の方法は、体の中に別のDIVを追加し、それを絶対的に配置することです。

html, body {
  height: 100%
}

div {
  position: absolute;
  top: 20em;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: LemonChiffon;
}

score 0 · Accepted Answer

主要なブラウザーの現在のバージョンをターゲットにしている場合は、幸運です。これはIE9でも機能するはずです（完全なサポート表を参照）：

html {
 height: 100%;   
}

body {
 margin-top: 20em;
 height: calc(100% - 20em); 
 background-color: LemonChiffon;
}

score 0 · Accepted Answer

私は次のようなことをします

html{
height: 100%; 
background-color:black;
}
body {
height:80%;
margin-top: 20%;
background-color: LemonChiffon;
}

3 に答える 3