- ベストアンサー
CSSでdivの縦幅を指定する方法
orc-orcaの回答
xhtml なら，親要素のサイズも指定しないとだめです． つまり，この場合は， html, body のサイズも指定しましょう．
関連するQ&A
- floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- cssのfloatについて
cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。 現状の構成は具体的に以下のような感じです。 <div id="main"> <div id="left">レフト</div> <div id="center">センター</div> </div> #main:after { content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; } #left {float: left;} #center { float: right} これをoverflowで実現するにはどうすればいいのでしょうか？ また、floatを使用しないで実現するメリットはなんでしょうか？
- ベストアンサー
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- スマホで横並びdiv
お世話になっております。 スマートフォンでdivの横並びをしようとしたのですが、 <html> <head> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> </head> <body> <div style="height:30px;line-height:30px;width:100%;"> <div style="overflow:hidden;float:left;width:50px;">日付</div> <div style="overflow:hidden;float:left;">本文</div> </div> </body> とした場合、 本文が長いと日付の下に本文が来るようになってしまいます。 本文の末尾が消えてdivが横並びになるようにしたいのですが 良い方法はないでしょうか？ よろしくお願いします。 以上です。
- ベストアンサー
- CSS
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- このCSSの設定で何故こうなるのでしょうか?
cssの定義は以下のようにしました。 #L_side { float:left height: 1000px; width: 100px; float: left; } #ctr { float :left; height: 1000px; width: 720px; } #R_side { float: left; height: 1000px; width: 100px; } htmlは <body> <div id="L_side"><img 画像L(サイズは100x1000) ></div>・・・・これをAとします <div id="ctr"><img 画像C(サイズは720x1000) ></div>・・・・これをBとします <div id="R_side"><img 画像L(サイズは100x1000) ></div>・・・これをBとします </body としました。 これをブラウザで表示させたら Aの隣にBの画像が表示されましたがCの画像は改行されたかのようにAの下に表示されました。 私の意図したのはABCと並んで表示されると思ったのですが(カタカナの"コ"の字を反時計まわりに90度回転したような形で)、これは何故でしょうか?
- ベストアンサー
- HTML
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- 高さを指定せずに子divにスクロールバー
お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか？ 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか？ お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> （「親divの高さ」-「他の要素の高さ」）＜「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか？無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>
- 締切済み
- CSS
- CSSでDIVを複数囲むには
CSSでレイアウトをしているのですが、<div>で囲んだ画像Aと画像Bがあります。この2つの<div>を更にもう1つの<div>（以下、大DIV）で囲んでまとめたいのですが、うまくできません。その2枚の画像はそれぞれfloatでleftとrightに寄せているのですが、floatを適用させると大DIVの外に出てしまいます。 2つの画像を左右に寄せることは必須です。その後で、大DIVでまとめておけばあとでレイアウトの変更があったときに作業がスムーズに進むと思ったのですが。 これはどのようにすればよいのでしょうか？
- 締切済み
- HTML
- xhtml+cssでdivをdivで内包する
xhtml+cssでウェブサイトを作成しています。 その際、 <div id="a"> <p>題名</p> <div class="b">内容</div> <div class="b">内容</div> </div> のようにdiv要素内にdiv要素を内包したいと思っています。 しかしこのままだと親であるdiv id="a"を、子であるdiv class="b"がはみ出してしまいます。 ｃｓｓハックを使用する方法が http://www.alink.co.jp/tech/blog/2009/04/13/css-clearfix%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fdiv%E3%81%AE%E6%AE%B5%E7%B5%84%E3%81%BF%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF/ に掲載されていましたが、ＩＥ７とＩＥ－ＭＡＣが対象のようです。 これと同じような効果が得られるもので、ＩＥ６以降、Ｆｉｒｅｆｏｘ２以降、Ｆｏｄｏｒａそれぞれに対応している方法はありますでしょうか？ 私がどうしたいのか少しわかりにくいかもしれませんが、上記ＵＲＬでどうしたいのかはわかると思います。 アドバイスお願い致します。
- ベストアンサー
- CSS
お礼
ありがとうございます。 html, bodyを100%に指定することで表示できました。 すべての親要素にサイズ指定が必要であるということを初めて知りました。 下の方へのコメントにも書かせて頂いたのですが、 実は他にヘッダ部分のブロックがあり、希望通りの表示にできないようですので、 質問は終了させて頂きます。ありがとうございました。