- 締切済み
ＨＴＭＬの質問です。
ＨＴＭＬのコーディングのご質問です。自分ではどうしても解決できず、皆さんにご協力をお願いしたいです。 グーグルクロムのブラウザで見た場合は、どうしても一番下に隙間ができてしまいます。 ソースは下記の通りです。 ＨＴＭＬ -------------------------------------------- <!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=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="test.css" type="text/css" /> </head> <body> <div id="wrap"> テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br /> テスト<br />テスト<br />テスト<br /> テスト<br /></div></body> </html> ------------------------------------ CSS ------------------------------------ @charset "UTF-8"; body,div,h1,h2,h3,h4,h5,h6, p,blockquote,pre,address, ul,ol,li,dl,dt,dd, form,fieldset,legend { margin: 0; padding: 0; font-family: "ＭＳ Ｐゴシック","ヒラギノ角ゴ Pro W3",Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", sans-serif; line-height: 0%; } html { overflow-x:hidden; overflow-y:scroll; } html, body { height:100%; } /*font-size*/ body { font-size: 10px; _font-size:62.5%;/*IE6*/ margin:0px; padding:0px; background: #F5F5F5; color:#000; line-height:1.4; } input,textarea { font-family:Arial,Helvetica,sans-serif; } img,object { margin: 0; padding: 0; border: 0; vertical-align:bottom; } /*table*/ table { border-collapse: collapse; border-spacing: 0; } p { text-align: justify; text-justify: distribute; } /*clearfix*/ /*height0.1px font-size0.1em*/ .clearfix:after, div:after { content: "."; display: block; height: 0.1px; font-size: 0.1em; clear: both; visibility: hidden; } .clearfix { display: inline-block; }/*IE7p*/ .clear { clear:both; } /* Hides from IE-mac */ * html .clearfix { height:1%;} .clearfix { display:block;} /* End hide from IE-mac */ ul, li { list-style:none; margin:0px; padding:0px; } strong { font-weight: normal; } em { font-style: normal; } address { font-style: normal; } body { background: #FAF5CF; height: 0%; line-height: 0%; } h1,h2,h3,h4,h5,h6, p,blockquote,pre,address, ul,ol,li,dl,dt,dd, form,fieldset,legend{ line-height: 100%; } #wrap { background: #FFFFFF; width: 906px; margin: 0 auto; padding:0; line-height: 160%; } ----------------------------- #wrapには高さを指定せずに使いたいと考えています。 お手数をおかけしますがよろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- hinananana
- ベストアンサー率69% (16/23)
原因はおそらく .clearfix:after, div:after { content: "."; display: block; height: 0.1px; font-size: 0.1em; clear: both; visibility: hidden; } です。 とりあえずこれを消したら大丈夫なんじゃないかなと。
- tracer
- ベストアンサー率41% (255/621)
この質問にこのまま回答がつかない理由があるとすれば、あなたのいうところの「隙間」を誰も理解できないからだと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
★グーグルクロムのブラウザで見た場合は、どうしても一番下に隙間ができてしまいます。 HTMLに対して、根本的な誤解があります。HTMLは本来 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より のためのものです。ワープロやDTP( http://ja.wikipedia.org/wiki/DTP )とは、根本的に違うもので、そこまで表示にこだわるなら他の規格を使うべきです。今は携帯電話やiphoneでの訪問者も多い。そしてなよりも検索エンジンが・・ 必要もないのに、なぜTransitionalなのか・・strictだとほぼすべてのブラウザで標準モードで表示される。 不必要にmarginやpaddingを0と初期化しない。要素が登場するたびに改めて指定させられる。html,body程度にとどめておこう。 heightは、ウィンドウ高さを参照できません。(IE6の互換モードだと参照するが、それはバグです。!!) ・・HTMLの本来の目的(様々なUAに対応)からも、参照すべきではない 継承や詳細度をきちんと把握してCSSを書きましょう。十数行ですむものがメンテナンス不能の膨大なものになってしまう。 font-family:は継承されるのでhtmlないしbody一箇所の指定でよい。 示されたHTMLとCSSが当てはまりません、 #wrapとか、意味のないID,class名は使わないようにしましょう。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
