締切済み

heightとmin-heightの組み合わせ方

2009/02/26 17:44

webページでページの縦の長さを以下のようにしたいです。ブラウザの縦の表示が600px以上だった場合　→　ページの縦長さは100% ブラウザの縦の表示が600px未満だった場合　→　ページの縦長さは600px つまり、縦長さ100％を維持しつつ、ブラウザの縦長さが600pxを下回った場合にはページの長さを600pxで固定(スクロールバーつき)したいのです。今現在cssでidを2つ作ってそれぞれに min-height:600px と height:100% を与えてその二つのidでbodyを囲んでいるのですが、うまくいきません。どなたか教えてください；；

noname#123915

HTML
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

noname#83877

2009/02/26 17:47 回答No.1

height:auto !important; height:600px; min-height:600px;

関連するQ&A

min-heightとheightの違いについて
HTML、CSSを勉強中です。こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。ページの内容が少ないときにもフッターを最下部に表示させるため、いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS（一部） html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません（実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。
- 締切済み
- CSS
Firefoxで背景が消えてしまう（スクロール時） min-height:100%
現在、下記のようにウェブページを作っています。 <div id="pagebody"> <div id="contents"> <p>aaaa</a> <p>aaaa</a> <p>aaaa</a> </div> </div> #pagebodyに背景を設定しrepeat-yで繰り返し指定をしています。しかし、Firefoxの場合スクロールすると背景が消えてしまいます。 html { height : 100% ; } body { height : 100% ; width : 724px ; margin : 0px auto ; text-align : center ; } body > #pagebody { height : auto ; } #pagebody { height : 100% ; min-height : 100% ; background : url (../img/bg.jpg) repeat-y center } ある程度調べ、上記のように書いても全く治らずです。アドバイスお願いします。
- ベストアンサー
- CSS
CSSでheight:100％の際の画面外の表示
初歩的な質問で申し訳ございませんが、よろしくお願いいたします。 CSSでレイアウトする際に、 body { width:100%; height:100%; margin:0px; padding:0; background-color:#000; min-height: 100%; } html{ height:100%; } #wrap { background-color:#fff; margin:0 auto 0 auto; width:500px; height:100% } <body> <div id="wrap">テキスト</div> </body> この様にした場合に上記HTMLソースの様にテキスト量が少なく画面がスクロールしない場合は縦100%で画面内に綺麗におさまり問題ないのですが、テキスト量が多くなり画面外にはみ出た場合、ウィンドウサイズ部分のみ背景色が#fffでスクロール後のウィンドウ外は背景色が#000になってしまいます。これを対処する方法をご教授願えますでしょうか。既出の質問であれば回答の場所に導いていただければ非常に助かります。何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
tdに対してmin-heightの定義、または同じ
テーブルのtdに対してmin-heightの定義を行いたいのですが、調べてみますと、多くのブラウザでtdなどへは対応外と記述が御座います。色々と駆使して試してみたのですがうまくいきません。 tdに対してmin-heightをハック的にでも適用することは出来ませんでしょうか？または同じような効果が得られる方法がありましたらアドバイス願います。 min-height:100px; height:auto; height:100px; この様な方法もあったのですが、div要素には効果があるようですがtdにはやはり反映されませんでした。よろしくお願いします。
- 締切済み
- CSS
Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- 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
min-width？を使って背景にスクロールを出さない
body内にcssでbox1をおき、そこに固定背景を指定しています。その中にさらにbox2を置いています。 box1の幅が1000px、box2の幅が600pxだとします。できれば、横スクロールをbox2の幅以下で出したいのです。 min-widthではIE6等には利きません・・・。ハック、javascriptもかわまないので、どなたか効率のいいやり方を伝授していただけないでしょうか？よろしくお願いします。何もない状態のcssを書きます。 ■CSS body{ } .box1{ width: 1000px; height: 500px; margin: 10px auto; background-color:#000; text-align:center; } .box2{ width: 1000px; height: 300px; margin: 100px auto; background-color:#fff; } ■HTML <body> <div class="box1"> <div class="box2"> </div> </div> </body>
- 締切済み
- HTML
divの背景を高さ100%表示
以下のように、divをつかって背景色を設定した際、右のピクセル指定の背景は、スクロールバーが出た場合でも指定された高さまで背景色が表示されるのですが、左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。色々調べたのですが、過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。同じように試してみたのですが、思ったように表示がされません。指定している場所が間違っているのでしょうか？ <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>
- ベストアンサー
- HTML
Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
div入れ子による height100%
お世話になります。親要素のdivは縦100%になるのですが、入れ子のdivが縦100%にならず困っております。検証ブラウザは、IE6、IE7、FF2、Safariです。お分かりの方、ご教授をお願いいたします。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="wrapper-inner"> <div id="contents"> テスト <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </div> </body> </html>
- ベストアンサー
- CSS

heightとmin-heightの組み合わせ方

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

heightとmin-heightの組み合わせ方

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録