• ベストアンサー

cssでhtml{width:100%;}の意味がわかりません

reverie013の回答

回答No.1

heightの方は、body以下のブロックレベル要素に高さを指定するための設定ですね。 (多分)普通は併せてmargin:0;padding:0;なども指定すると思います。 widthの方は私はちょっとわからないですね。。。

ky_qa0903
質問者

お礼

早速のご回答ありがとうございます。 おっしゃる通り、margin:0;padding:0;の指定もされています。 heightは一応指定しておいた方がよさそうですね。

関連するQ&A

  • 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>

  • 【CSS javascript】ブラウザ依存 各ボックスwidthの合計値をoffsetWidthに収めたときの表示

    ボックス1、ボックス2、ボックス3と3つのボックスをfloat: left;で左から横に並べて、キッチリブラウザの幅に収めたいです。 ボックス1は、width: 20%;を指定。 ボックス2は、width: 5px;を指定。 ボックス3は、ブラウザ幅に3つが収まる値をjavascriptで計算して指定したいです。 そこで、各ボックスwidthの合計値をoffsetWidth以下なら、各ボックスは折り返さずに表示されると考え、以下htmlを作成しました。 ※行頭スペースは全角です。 <html> <head> <style type="text/css"> #b1 {  background-color: ffffff;  float: left;  height: 100%;  width: 20%;  overflow: auto; } #b2 {  background-color: 000000;  float: left;  height: 100%;  width: 5px; } #b3 {  background-color: ffffff;  float: left;  height: 100%;  overflow: auto; } </style> <script> i = function(id){ return document.getElementById(id) }; function init(){  var W = document.body.offsetWidth || document.documentElement.offsetWidth;  var b1 = i('b1').offsetWidth;  var b2 = i('b2').offsetWidth;  var b3= W - b1 - b2;  alert(W +' = ' + b1 + ' + ' + b2 + ' + ' + b3);  i('b3').style.width = b3 + 'px'; }; </script> </head> <body onLoad = "init();" > <div id="b1">f1</div> <div id="b2" >&nbsp;</div> <div id="b3">f2</div> </body> </html> 上記を実行した結果、IE,Operaは折り返してしまい、FirFox,Google Chromeは折り返さずに表示できました。 IE,Operaは、なぜ折り返してしまうのでしょうか?

  • CSS&HTML

    はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。<div id=main> </div>の中にタグは入れられますか?   mainはCSS HTML記述が終わっています。 幅 200 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。

  • HTML CSSを、教えてください。

    お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }

    • 締切済み
    • CSS
  • CSS、width100%でもできる余白

    CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか? また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}

    • ベストアンサー
    • CSS
  • CSSのwidthプロパティについて教えてください。

    お世話になります。 フォームメールをCSSでレイアウトしています。 見出しの幅を揃えるため下記のコードを記述しましたが,labelの幅が変更できません。 ----- HTML ----- <fieldset> <label class="w1">項目</label><input class="w1" type="text" name="someone" /> </fieldset> ----- CSS ----- .w1 { width: 200px; } labelの幅は200pxになりませんでしたがinputの値は200pxになりました。 labelの幅をテーブルを使わずに揃えたいのですが その方法が分かりません。 手がかりでも良いので教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSによってIEでNNにあるmax-widthと同等の機能は?

    お世話になります。 NNですとmax-widthのCSSが使えると思うのですが IEでは適用されていません。 そこでmax-widthを同等の機能を満たすようにするにはどうすればよいのでしょうか? divタグを使用しておりまして、max-widthで指定した幅を超えないようにしたいと思っております。 申し訳ありませんが、ご教授よろしくお願いいたします。

  • cssの使い方について

    cssの使い方について imgやswfのheightやwidthはcssで設定することはできないのでしょうか? div classで囲ってcssでwidthとheightを設定しましたが、レイアウトの前面のように浮き上がるだけでサイズ変更できませんでした。 その他の文字やボックスはcssでwidthやheightの設定ができるのに、なぜimgなどはできないのでしょうか?できるものとできないものが他にもたすうあるのでしょうか?

    • ベストアンサー
    • HTML
  • CSSレイアウト

    CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか? またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。

  • 画像をcssでレイアウトしたいです

    以下のボックスにあるイメージをボックスの左上を基準に2x2の形に並べたいです。その際にcssのpositionを使用してrelativeを指定して定義したのですがうまくいきません。正しい指定の方法を教えてください。 <div id="bottom_right"> <img src="images/image1.gif" width="176" height="57" /> <img src="images/image2.gif" width="176" height="57" /> <img src="images/image3.gif" width="176" height="57" /> <img src="images/image4.gif" width="176" height="57" /> </div>

    • ベストアンサー
    • HTML