本文を、縦幅いっぱいに表示させるには？

解決済

質問者：hotjupiter
質問日時：2010/04/21 16:25
回答数：2件

本文を、縦幅いっぱいに表示させるには？

Tableタグを使い、画面いっぱいに内容を表示させるHTMLを作りたいと思っています。
横幅は、画面いっぱいに表示できました。
しかし縦幅が画面いっぱいに表示できず、困っています。

内容は、「ヘッダ部・本文・フッダ部」という、3段構成のHTMLです。
ヘッダ部は、画面上部に50ドット。
フッダ部を、画面下部に50ドット。
そして、残りの全領域を、本文の表示に充てたいのです。
つまり、↓こんな感じにしたいのです。
――――――――――――
ヘッダ部
――――――――――――
本文
（以下、余白）
　　　・
　　　・
　　　・
　　　・
　　　・
　　　・
――――――――――――
フッダ部
――――――――――――

しかし、実際には、↓こんな感じに表示されてしまいます。
――――――――――――
ヘッダ部
――――――――――――
本文
――――――――――――
フッダ部
――――――――――――
（以下、余白）
　　　・
　　　・
　　　・
　　　・
　　　・
　　　・

TableタグのHeight属性を100%にすればうまくいきそうな気がするのですが…何がいけないのでしょう？

また、テーブルの上下左右に、若干の余白が表示されてしまいますが、この余白もできればなくしたいと思っています。
方法をご教授いただけないでしょうか。よろしくお願いします。

以下、HTMLコードです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>てすと</title></head>
<body>
<table width="100%" height="100%" border="1">

<tr height="50"><td>ヘッダ部</td></tr>

<tr><td>本文</td></tr>

<tr height="50"><td>フッダ部</td></tr>

</table>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

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

No.1ベストアンサー

回答者： askaaska
回答日時：2010/04/21 16:48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

というのを別なものに書き直せばいいわ。
たとえば
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
とかね。

理由は・・・めんどいので省略

- 0
- 件

通報する

この回答へのお礼

さっそくの回答、ありがとうございます。
ご指摘の方法で実現できました。
「テーブルの上下左右の余白のなくす方法」についても、回答をお待ちしたいので、ひきつづき回答受付のままとさせていただきます。

通報する

お礼日時：2010/04/21 18:08

No.2

回答者： naokita
回答日時：2010/04/21 18:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

body , html { height: 100%; margin:0; padding:0; }
body{ border:3px double silver;}

</style>
</head>
<body>
<div style="position:relative; height: auto !important; height: 100%; min-height: 100%; ">
<div style="height: 50px; border-bottom: 3px double silver;">
ヘッダ部
</div>
<div>
本文
</div>
<div style="height: 50px; width: 100%; position:absolute; left: 0; bottom: 0; border-top: 3px double silver;">
フッダ部
</div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
Bodyタグの前に、以下の行を挿入したら、余白がなくなりました。
<style type="text/css">body , html { height: 100%; margin:0; padding:0; }</style>

スタイルシートとかDivタグとかは詳しくないですが…がんばってみます。

通報する

お礼日時：2010/04/21 20:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！