ウェブページの上下に暗幕を表示する方法

解決済

質問者：noname#123915
質問日時：2009/03/09 07:17
回答数：1件

ウェブページの上下に黒い幕をそれぞれ50pxずつ表示させたいのですが、その際に現在

<body>
　<h1>
　　内容
　<h1>
<body>

とある場合、cssで
body{margin:0:
padding:0;
background:#000000;
}/*暗幕用*/

h1{height:100%-100px;
width:100%;
margin-top:50px;
}

としていますが、全くうまくいきません。
heightで%とpxを組み合わせるのは不可能なんでしょうか？
また、ほかにいい方法をお知りの方(table、frameは避けてほしいです；)、教えてくださると非常に助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： grumpy_the_dwarf
回答日時：2009/03/09 09:22

中身がh1(大見出し)しかないページってどうよって感じですが、と

りあえずCSSは値を演算する機能を持ちません。ハイフンを書いても
引き算だとは思わないのです。単位を混在させたのが悪いわけでは
ありません。

わたしなら、
<body>
<div id="head" class="belt"></div>
<div id="contents">中身</div>
<div id="foot" class="belt"></div>
</body>
というような構造にして、スタイルを
　#contents　{
　　　　　background-color:　white;
　　　　　padding:　50px　0　;
　　　　　}
　.belt　{
　　　　　height:　50px;
　　　　　width:　100%;
　　　　　background-color:　black;
　　　　　position:　fixed;
　　　　　}
　#head　{
　　　　　top:　0px;
　　　　　}
　#foot　{
　　　　　bottom:　0px;
　　　　　}
というふうにします。web標準に従うブラウザなら、上下に黒帯が固
定され、contentsはその間でスクロールします。