本文を縦幅いっぱいに表示させる方法とは？
- Tableタグを使用して、画面いっぱいに本文を表示させるHTMLを作成したい。
- 縦幅を画面いっぱいに表示させるには、Height属性を100%に設定する必要があるが、うまくいかない。
- また、テーブルの余白もなくしたいが、その方法について教えてほしい。
- ベストアンサー
本文を、縦幅いっぱいに表示させるには？
本文を、縦幅いっぱいに表示させるには？ 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>
- hotjupiter
- お礼率71% (33/46)
- HTML
- 回答数2
- ありがとう数11
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> というのを別なものに書き直せばいいわ。 たとえば <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> とかね。 理由は・・・めんどいので省略
その他の回答 (1)
- naokita
- ベストアンサー率57% (1008/1745)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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>
お礼
ありがとうございます。 Bodyタグの前に、以下の行を挿入したら、余白がなくなりました。 <style type="text/css">body , html { height: 100%; margin:0; padding:0; }</style> スタイルシートとかDivタグとかは詳しくないですが…がんばってみます。
関連するQ&A
- テーブルの横幅を常にブラウザ一いっぱいに表示するに
テーブルの横幅を常にブラウザ一いっぱいに表示するには？ たとえば *********************************************** <HTML> <HEAD> <TITLE>test</TITLE> </HEAD> <BODY> <table border=1 cellspacing=0 cellpadding=0> <caption>キャプション</caption> <tr> <td>内容1</td> <td>内容2</td> </tr> </table </BODY> </HTML> *********************************************** を作ると、画像のようにコンパクトに表示されてしまいます。 やりたい事はブラウザの横幅が １０cmなら画面いっぱいテーブルを表示させて、 ２０ｃｍなら画面いっぱいにテーブルを表示させたいです。 <table border=1 cellspacing=0 cellpadding=0 width="2000"> するとはみ出してしまうし、 <table border=1 cellspacing=0 cellpadding=0 width="1000"> だと小さすぎます。 誰がどのブラウザで開いても、横幅は画面いっぱいに入るように表示するにはどういうタグを書けばいいのでしょうか？
- ベストアンサー
- HTML
- DHTMLでテーブルの行の表示・非表示を切り替える。
こんにちは。 WEBアプリケーションのモックアップを作成しています。 自身はJava屋ですが、DHTMLに明るくないため、苦戦しています。 同一画面内のリンクがクリックされた場合に・・・ テーブルの行の表示、非表示を切り替えたいのです。 <!-- ========================= --> <!-- テーブル１ --> <table border="1"> <tr> <td>ヘッダ１</td> <td>ヘッダ２</td> </tr> <!-- ☆☆☆ ここから ☆☆☆ --> <tr> <td>111</td> <td>aaa</td> </tr> <tr> <td>222</td> <td>bbb</td> </tr> <!-- ☆☆☆ ここまで消したい ☆☆☆ --> </table> <!-- テーブル２ --> <table border="1"> <tr> <td>ヘッダA</td> <td>ヘッダB</td> </tr> <tr> <td>あああ</td> <td>いいい</td> </tr> </table> <!-- ========================= --> <tr>タグを<div>タグで囲んで、styleでhidden、visibleを切り替えようと考えましたが、<tr>に<div>タグが使えない事を知りました。 そこで、テーブル１を大きくテーブルで囲み、ヘッダとボディ部をセルに入れて、セルの表示・非表示を切り替えました。 これは上手くいったのですが、非表示にした場合、テーブル２との間は詰まるようにしたいのですが、もともと表示されていた分のスペースが出来てしまいました。 あまり、ロジックを組み込まずに作ろうと考えているのですが、上手い方法が思いつきません。 何か良い方法がありましたら、ご教授願います。 ターゲットのブラウザは… IE5.5～IE7 です。
- ベストアンサー
- HTML
- divのheight指定で画面一杯に表示したい
よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 html, body { height: 100%; margin: 0px; padding: 0px; } 親子構造としては以下を想定しています(いくらか簡略化しています) <html> <body> <div id="H" style="height:60px;"> (1)ここにヘッダー的なもの </div> <div id="B" style="height:100%; overflow: auto;"> (2)この部分を縦一杯にしたい </div> </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 <div id="B" style="height:100%; overflow: auto;"> <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> ・・・ </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？
- ベストアンサー
- CSS
- gooブログのサイドバーが本文とずれて表示される
TEXt画面で投稿していますが、HTMLの記述の問題なのかどうかわかりませんが、画面が本文とサイド画面とがずれて表示されてしまいます。本文の長さだけずれて表示され、市松模様のような感じになってしまいます。 <table border="0" width="100%" cellpadding="" align="center"><tr><td align="center" bgcolor="#b8d26b"><font size="3" color="#003d84"> ♪ <B> </B></font></td></tr></table> のように記述しています。 そして、本文には<BLOCKQUOTE></BLOCKQUOTE>を使っています。 また画像には、<DIV></DIV>を記入して表示しています。 これらの何が問題なのか教えていただきたいのです。 <table><tr><td><BLOCKQUOTE>を止めてアップし直してみても一向に直りません。 よろしくお願いします。
- ベストアンサー
- ブログ
- TABLEの高さの固定、TABLEの高さの変動を固定について
TABLEの高さの固定できずに困っています。 【(2)】に縦500程度の画像掲載（又は複数回改行）をすると、 【(1)】の50pxで固定している縦幅が変動してしまいます。 【(3)】の<TD>にheight=500pxのような大きな値を入れると 【(1)】の縦変動を固定できるのですが、【(2)】の縦幅が大きくなると、 その都度、【(3)】の<TD>のheightの値を書き換えなければなりません。 CSS等で【(1)】のheight：50px；の指定をしても、 【(2)】の縦幅の上昇より【(1)】が50px以上になってしまいます。 【(1)】のheightを【(2)】の縦の変動に左右されず固定する方法を 出来ればCSSを使用した方法でわかる方がいらっしゃいましたら ご回答宜しくお願い致します。 【-------HTML START---------】 <TABLE style="WIDTH: 500px;HEIGHT:100%" cellSpacing=0 cellPadding=0 border=1> <TR> <TD colSpan=2 height="20px"></TD></TR> <TR> <TD height="50px">【(1)】</TD> <TD vAlign=top width="165px" rowSpan=2>【(2)】</TD></TR> <TR> <TD vAlign=top>【(3)】</TD></TR></TABLE> 【-------HTML END---------】
- ベストアンサー
- HTML
- ホームページの表と画像の間の余白をなくしたい
ｈｔｍｌでホームページをつくっています。 表と画像の間に謎のおおきな余白ができます。 <img src="2.jpg" width="600" height="500"> <table height="50%" border="0"> <tr> <td>あああ</td> <td>あああ</td> </tr> </table> 特になにもしていないのですが どうすれば余白をなくすことができますか？ よろしくおねがいします。
- 締切済み
- HTML
- 画像を一杯に表示できない
PCでもスマホでも画像を幅一杯に表示させたいです。全画面表示ではありません。できればCSSファイルは別途作成せず、１つのHTMLファイルですませたいです。そこで以下のソースを書きましたが、画像x.jpgのサイズが、画面の大きさを変えても、変わりません <head> <style type="text/css"> img.example1 { width: 100%; height:auto; } </style> </head> <body> <div align="left"> <table width="100%" align="left" bgcolor="#FFFFFF"> <tr> <td width="100%"> <p><img src="x.jpg" alt="x" "class="example1"> </p> </img> </td> どうしたら良いでしょうか？
- 締切済み
- CSS
- TABLE内のTABLEのHEIGHT属性が利かない
TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- FireFoxでテーブルのbackgroundが表示されない
テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。 文字が見えなくなってしまい大変困っています。 CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。 どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。 下記コードです。 /*CSS*/ TABLE.SAMPLE { table-layout: fixed; width: 500px; background:"#FFFFCC"; } td.td_hd { background:"#000066"; color:Silver; font-size: 12pt; } /*HTML*/ <table class=SAMPLE> <tr> <td class=td_hd>ヘッダタイトル</td> </tr> <tr> <td>あああああああああああああああああああああああああああああ</td> </tr> </table>
- ベストアンサー
- HTML
- テーブル内に画像表示するとき。
自サイトでレイアウトにテーブルを使っています（邪道って言わないで……）。 で、サイトロゴをセル内に表示させてネスケで確認したところ、 画像が半分テーブルの外にはみ出したようになってしまいました。 ちなみにはみ出した部分は少ししか表示されず、 つまり絵がぱっつんと途中で切れてしまった状態です。 普段はIE派ですが、こちらでは問題なく表示されます。 ネスケは4.7なのですが、まさかそういうバグがあるのでしょうか。 タグ手書きでいつも何かしらミスがあるので、今回も探したのですが、 何故か何が悪いのかわかりません。 以下にソースを載せますので、一緒に考えてくださると嬉しいです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <table bgcolor="#ffffff" width="580" height="210"> <tr> <td width="210" height="210" rowspan="5"> <img src="×××.gif" width="210" height="210" alt="コメント"> </td> <td width="370" height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> <tr> <td align="right" height="15" class="orange2"> 文章文章文章文章 </td> </tr> <tr> <td height="166"> 文章文章文章文章 </td> </tr> <tr> <td height="15" align="right"> 文章文章文章文章 </td> </tr> <tr> <td height="7"> <img src="1.gif" width="1" height="1"> </td> </tr> </table> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 問題の画像は4行目の「×××.gif」。 ちなみに1.gifはこれまたレイアウトの強い味方、 1ピクセル四方の透明画像になっております(笑)。 どうぞ宜しくお願いします。
- 締切済み
- HTML
お礼
さっそくの回答、ありがとうございます。 ご指摘の方法で実現できました。 「テーブルの上下左右の余白のなくす方法」についても、回答をお待ちしたいので、ひきつづき回答受付のままとさせていただきます。