- ベストアンサー
スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法
画面を上下に分けて，上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い，次のようにしてみたんですがうまくいきません． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> <div style="width:100%; height:100%; background-color:#fcc; "> 画面下部 </div> </body> </html> 要は下部の「残り全部」のやり方がわかっておらず，全体的な高さが100px+100%になり，表示画面より下に100pxはみ出してしまいます． 次のようにdivを入れ子にするとうまくいくんですが，内部に表示させる内容によっては不具合が出るので，どうしてもdivどうしが独立した形で実現させたいです． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100%; background-color:#fcc; "> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> </div> </body> </html> 他の質問サイトでも尋ねてみたのですが，質問の意味を理解してもらえずに別に問題はないという回答を１件頂いたのみで解決できませんでした．また，テーブルではなく必ずスタイルシートで実現したいです．対策をご存知の方，ご教示よろしくお願いします．
- KettaMachine
- お礼率78% (98/125)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
思い出したのでIE対応にするための追記。 前回のサンプルの<head>～</head>に以下を追加。 <!--[if IE]> <style type="text/css"> #Content { width:100%; height:expression(document.body.clientHeight - 100); } </style> <![endif]--> 参考 http://www.keynavi.net/ja/bugh/comments.html http://useyan.x0.com/s/html/expression/
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
CSSとしてはやりよう(※1)はあるんですが、WinIEのバグ(※2)のために実質的には不可能です。 ※2 http://members.at.infoseek.co.jp/cssbug/detail/winie/b043.html ※1 FirefoxやOperaではOK <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> html {height:100%;} body{ margin:0; padding:0; height:100%; } #Header { height:100px; background-color:#cfc; } #Content { position:absolute; top:100px; left:0; right:0; bottom:0; overflow:auto; background-color:#ccc; } </style> </head> <body> <div id="Header"> Header </div> <div id="Content"> <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p> <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p> <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p> <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p> </div> </body> </html>
お礼
まさに望んでいた回答です！ Contentのaaaaaaの数を減らしてOperaで確認したら希望通りに表示されました．ご回答ありがとうございます．しかしＩＥはバグでＮＧとは．．．トホホです．．．
- talepanda
- ベストアンサー率58% (45/77)
パーセント指定は親要素に対する割合なので、原理的には無理ですよね。 ってことで、多分無理だと思いますよ。 ＞内部に表示させる内容によっては不具合が出るので どんな不具合でしょう？こっちを直す方が早い気がしますが。
お礼
ご回答いただきありがとうございました
関連するQ&A
- ホームページ作成 スタイルシートを使用して画面を３分割したい。
ホームページ作成 スタイルシートを使用して画面を３分割したい。 下のようなソースを作成しました。 head と body と foot に画面を３分割してます。 footを高さ30pxにしてますが、これをウィンドウの一番下にくっつけて 画面解像度、ウィンドウサイズを変更してもhead部分は一番上へfoot部分は一番下に表示したいと思ってます。 どのような指定をすれば出来ますでしょうか？ご教授願いします。 -------------------------------------------------- <html> <head> <style> * { padding: 0; margin: 0; } #head { height: 100px; width: 100%; background-color: #FFFF00; } #body { width: 100%; } #foot { height: 30px; background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div id="head"> タイトル </div> <div id="body"> テストページ </div> <div id="foot"> copyright(c) </div> </body> </html>
- ベストアンサー
- CSS
- スタイルシートで画面を縦に２分割する方法
スタイルシートで左側にメニュー(class=menu)を、右側に本文を書くようなサイトを作っています。 body { margin: 0px; } .menu { background-image:url(./img.gif) ; background-repeat:repeat ; margin:0px ; padding:10px ; position:absolute; width:150px ; } といった感じにしていましたが、左側メニューの背景がテキストの終端部分で切れてしまいます。（メニューの行数が短いので。） 私は、下までメニュー部分の背景がくるようにしたいのです。（つまり、画面が左右に２分割されるように） そこで、いろいろ調べて、body{}と.menu{}に「height:100%;」を加えることによって、少し改善が見られました。 表示させると、画面がきちんと２分割されます。 しかし、右の本文が長い時、スクロールをすると、それに伴いメニューが上に行き、やはりメニュー部分の下部が空白になります。 スクロールしても、下まできちんと２分割できるようにするには、どうすればいいでしょうか？ たぶん、分かってしまえば簡単なことなのでしょうが、よろしくお願いいたします。
- ベストアンサー
- HTML
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- スタイルシートの指定に関して
<body>タグにクラスを与えて、以下のようにしました。 <body class="home blog"> 一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。 2つのファイル home.html と index.html ファイルを作成しました。 html の記述は全て同じとします。参照する CSS ファイルを同一とします。 上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として home.html には、class="home" のみを反映し、 index.html には、class="blog" のみを反映させたい。 以下にサンプルを表記します。 html ファイル home.html / index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テストページ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="home blog"> <div id="container"> <p>テストページ</p> </div> </body> </html> css ファイルは home.html / index.html で共通 @charset "UTF-8"; body { margin: 0; padding: 0; text-align: center; background-color: #FFF; } .home #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FFE; } .blog #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FEE; } 上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。 <body class="home blog"> の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。 自分のスキルでは無理だと思うのですが・・・。 CSS の記述でデザインを別けることが出来るのでしょうか。
- ベストアンサー
- CSS
- 隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム IE ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- 【スマホ・タブレット】floatの高さ可変マージン
スマホやタブレットにて画面サイズが違っていても常に横幅を１００％で表示させたいと思っています。 ただfloatで回り込ませた場合、Link１に右と下にマージンができません。 またborder-radiusを付けた場合下部が角丸にならず、何かうまく表示される方法はないかと悩んでいます。 この様な場合どのようにソースを書けばいいのかアドバイスを頂ければと思います。 またLink1やLink2の部分の高さの中央揃えにしたい場合もご教授頂ければ幸いです。 宜しくお願いいたします。 <style type="text/css"> <!-- html,body { margin: 0; padding: 0; height: 100%; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; } div#boxArea { overflow: hidden; height: auto; width:100%; } div#boxArea div { float: left; padding-bottom: 32767px; margin-bottom: -32767px; } div#boxArea div#one { width: 10%; } div#boxArea div#two { width: 50%; } div#boxArea div#three { width: 50%; } --> </style> </head> <body> <div id="boxArea" class="cl"> <img src="http://www.universe-s.com/img/news/2004/0520_01.jpg" style="float:left; background:#000; width:20%; height:auto;" /> <div style="width:80%"> <div style="width:100%;"><div>aaaaa</div></div> <div id="two"> <div style="background:#F00; margin:5px 5px -32767px 5px; padding:5px 5px 32767px 5px; width:100%; border-radius:10px;">Link1</div> </div> <div id="three"> <div style="background:#060; margin:5px; padding:5px; padding-bottom: 32767px; margin-bottom: -32767px; width:100%; border-radius:10px;">Link2</div> </div> </div> </div> </body>
- 締切済み
- CSS
- フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？
モバイルサイト＜3キャリア＞：auでwidth指定が無効化される？ ３キャリア共通仕様のHTMLサイトを作成しています。cssはインラインで使用しています。 あ行 あ い う え お か行 か き く け こ... のような「あいうえお表」を挿入したいのですが、タイトルのとおりauで表示が崩れます。 実現したい仕様は添付画像の【docomo,Softbank】のような形で、この2キャリアでは問題なく表示されています。 が、【au】で見ますとそれぞれの要素のwidth指定が無視され、100%表示されてしまっているようです。 該当部分のソースは、以下のとおりです。 <div style="background-color:#FFF; padding:5px; margin:0;"> <div style="background-color:#FFF; padding:5px; margin:0; width:10px; height:15px; display:inline;">あ行</div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><a href="list_a.html"><font color="#FF0066">あ</font></a></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">い</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">う</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">え</font></div> <div style="border:#333 1px solid; background-color:#FFF; width:15px; height:15px; padding:3px; margin-right:3px; display:inline;"><font color="#FF0066">お</font></div> </div><!--a end--> 思いつくままにスタイルを追加したので、その中に両立しないものがあるのかなと思うのですが、なにぶんまだ不勉強で・・・ tableで組み直すことも考えたのですが、それぞれのboxをborderで囲みたいのと間隔を空けたいため、ソースが今以上に膨大になってしまう気がして踏ん切りがつきません。 ここを直せばいい、tableでも組める等、お知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
こんなに完璧な回答を頂けるとは．．．ただただ驚くばかりです．すごい方にご教示頂けて本当によかったです．ありがとうございました．これ以上の回答はこの世に存在しないと思いますのでこれで締め切ります．可能なら１万ポイントぐらい差し上げたいです．．．