Q&A
HTMLの提示コードをそのまま表示させると、各ブラウザのデフォルトbodyスタイルが適用されますので、下側にも余白（厳密には4方のmarginですが）が表示されます。「リセットCSS」は掛けてあるのでしょうか？･･･（追記）既に指摘されていましたね。良く見ていなくてスミマセン。
Ruby on Railsでwebサービスを作っています。
要素のheightをちょうどブラウザの表示幅にしたいと思い、styleシートに
html,body{ height:100% }
というコードを書いたのですがどうやらこれが効いていないようなんです。
このコードが適用されなければ、div要素のheightも100%にすることができません。
他のスタイルシートのコードを全てコメントアウトしてみたり
新しくrails new してまっさらな状態のアプリで上記のコードをapplication.cssに書いてみたりしてみたのですが全く適用されません。
このコードがそもそも間違っているのではないかと思いrailsを使わずに.htmlのファイルを作り、
<!DOCTYPE html> <html><head> <style> html, body { height: 100%;} .koko { height: 100%; background: #bbddff;} </style> </head> <body> <div class="koko"> 高さ100%で表示したい要素 </div></body></html>
と書いてブラウザで表示してみたら今度は適用されていました。
railsで作られたアプリでは、htmlやbodyのheightを指定することはできないのでしょうか？
もしする方法があるのであればご教授願います。
ちなみにこのコードが適用されていないことを確認した方法は
htmlとbodyのheightを小さくして背景色をつけて、下部が白くなっているかどうかで判断していました。
よろしくお願いします。
回答3件
0
まずは、「CSS自体が適用されていない」のか、「CSSは適用されているけど、ほかの設定と干渉して効いていない」のかの切り分けが必要です。
Developer Toolsを開いて、CSSの適用状況を確認してみてください。
投稿2018/11/08 22:40
総合スコア145183
解答ありがとうございます
すみません、如何せん初心者なものでデベロッパーツールのどこを見れば確認できるのかわかりません。
教えていただけると助かります
HTMLの表示から<html>や<body>を選んで、「Styles」欄を見てみましょう。
ありがとうございます
適用されていました。おそらく後者です。
ほかにはどんなCSSをかけていますか？
background-colorだけです。できるだけ干渉させないためにrails newしてまっさらな状態のアプリでやっています。
bodyのmarginが残っている、なんてことはありませんか？（ブラウザデフォルトだとある程度入ります）
0
Ruby環境もってない（のと守備範囲外）なのでCSSの一般的知識の観点からの回答となりますが、
heightやwidthでは効果のほどが分かりづらいので
「効いてるか」確認したいだけであれば、背景色を真っ黒とかフォントサイズをこれでもかというくらい大きくとか それくらい色々やってみたほうがいいかもしれません。
その記述以降に打ち消すものだったり別の指定があったらそちらで飲まれる可能性も充分ありえるので、
「heightを小さくして背景色をつけて、下部が白くなっているかどうか」という確認の仕方では微妙なところがあります。
html,bodyよりも*にして全てに適用させるという手もありです。
あと、外部ファイルでCSSをlinkさせているのでしたらブラウザ開発ツールのコンソールに404エラーとか、要は正しくlinkできていない旨のエラーが出ているかもしれませんので、
その場合はlinkさせたいCSSのパスが間違っているということになります。
つまりタイトルにあるように「Rails特有の不具合である可能性はほぼない」と考えられます。
投稿2018/11/08 18:29
編集2018/11/08 18:30
総合スコア80850
回答ありがとうございます
まず、背景色が適用されている時点でcssファイルがリンクされていない可能性はありませんし、エラーも出ていませんでした。
その設定のみが他の設定と干渉している可能性を確認するために他の設定をしてみるということですが、フォントサイズを大きくしたら、大きくなりますし、背景色は真っ黒にしたところで背景が黒くなるだけで何も変わりませんでした。
*に変えたりもしましたがやはり変わりはしませんでした。
やはり「Rails特有の不具合」だと思われます。
railsはサーバーサイド
html,cssはクライアントサイドなのでcssが反映されないのはrails自体、しかも不具合ではないですよ。
＞フォントサイズを大きくしたら、大きくなりますし、背景色は真っ黒にしたところで背景が黒くなるだけで
ほらcss反映されてますよ。
height指定が意味を成していないだけです。
cssが反映できるように書けてないだけです。railsは何も不具合起こしてません。
maisumakunさんの指摘も同じです。
あくまでhtml,cssの問題ですね。
なるほど
理解できました！すみませんでした
どうすれば解決できそうですか？？
この提示内容だけでは無理です。
再現確認ができません。
html,cssを全て提示してください。ちなみにブラウザって縦にスクロールして見ていくものなので、「ちょうどブラウザの縦幅」にしようとするのは仕様に逆らうことにもなります。
他の指定の干渉を受けやすいということです。
少し考え方を変えた方がいいかもしれませんね。
コンテンツが短い場合はどうしても 余白はできますしね。
「ヘッダー固定」「フッター固定」の方がいいかも
0
他のCSSのスタイルで上書きされている可能性もあるため、確認する意味では !important をつけてみるのも良いかもしれません。
html, body{ height:100% !important; background-color: blue; }
投稿2018/11/09 03:01
総合スコア319
あなたの回答
tips
プレビュー
