Q&A
もうすこし具体的な情報を記載ください
たとえばbodyのheightが100px、その中にheight200pxのdivがあるとか
できればソースを載せてもらうと良いでしょう。
器より中身がおおきければはみ出るでしょうけど、はみ出なければどうしたいのでしょうか？
開発者ツールで見た時に、
<html>タグの高さが1290pxになっていたのですが、<html>タグ内の要素の高さは倍以上あります。 子要素がはみ出ているような感じになってしまい、一番下の<div>要素のmargin-bottom分のbackground-colorも効きません。 <html>の高さを子要素が埋まるようにしたいのですが、どうしたら良いのでしょうか。 <html>のheightを明示的に5000pxなどとしても1290pxから変わりません。
書いてある通り、<html>が1290PXとなっており、これは明示的に5000PXなどと記述しても1290PXから変わりません。
中身も、倍以上（おそらく4000PXくらいはあると思いますが）あります。
ソースコードは長すぎてそのまま載せることができないので、この情報があればわかるなどご教示いただければ影響のありそうな必要な部分を載せられるかもしれません。
「<html>タグの高さが1290pxになっていたのですが、<html>タグ内の要素の高さは倍以上あります。」
「<html>のheightを明示的に5000pxなどとしても1290pxから変わりません。」
とのことですが、html要素の高さは1290pxより倍以上大きくなっているのですか？それとも1290pxから変わらないのですか？
あるいは、htmlのCSSについて、
・heightの値を超える高さになっている
・heightの値を変更することができない
という、別の2つの事象が起きている、ということでしょうか？
開発者ツールで見てみると、html要素の高さは1290pxとなっています。
また、どこにもheightを指定しているところやoverflowの記述はありません。
なるほど。
html要素の高さが大きくなっている、というのは、どのような事象を目撃することにより、そのように感じたのですか？
また、「子要素がはみ出ている」というのは、倍以上大きくなった高さのhtml要素から、さらにその下にはみ出ている、という理解で合っていますか？
いえ、
<html>⇒1290pxから変化しない
<html>内の子要素⇒4000px以上ある
このような現象は<html>開発者ツールを見ていて後半になってから気づきました。
>開発者ツールを見ていて
「Elements」「Computed」のタブで確認した、ということで合っていますか？
また、「子要素がはみ出ている」というのは、倍以上大きくなった高さのhtml要素から、さらにその下にはみ出ている、という理解で合っていますか？
もしかしたら、読み違えましたかね？
子要素の高さが4000px以上あるから、html要素の高さが大きくなっているのではないか、と*予想した*ということでしょうか？
だとすると、はみ出した、とは、どのような現象を見ることによってそのようにお感じになったのでしょうか？
どうも、現象について解釈の行き違いがあるように思えますので、できるだけ予断を排除して、事実だけを伝えていただけますと助かります。（たとえば、開発者ツールでこのように表示されていた、など）
開発者ツールで確認したことが以下のすべてです。
<html>⇒1290pxから変化しない
<html>内の子要素⇒4000px以上ある
<html>内の子要素といっているのは、
<html>
<div> ⇐これらのすべての高さを合わせると4000px以上ということです
</html>
その「確認したこと」の確認方法ですが、「Elements」「Computed」の一番上、または、「Elements」「Styles」の一番下にある、図のようなもので確認をされた、ということでいいですか？
それともそうではなくて、適用されているルールだけを見たのですか？
上記の補足依頼がわかりにくければ、「Styles」と「Computed」のheightの値に違いがあるか、ということをお答えいただいてもかまいません。
「Elements」の図を確認しています。（質問文に画像を追加しました）
適用されているルールには、そもそもheoghtを指定していないのでheightの記載はありません。
つまり、html要素の高さは大きくなっていないのですね？
了解いたしました。
すみません、styleのほうをよく見たら
heightに100vwが入っていました。
原因はこちらですね。
cssのほうでは指定していないのですが、なぜ入ってしまうのでしょう、、
右端に、CSSが書かれている場所へのリンクがあるはずです。
他の外部CSSに記載されていました。
ありがとうございます。
ご解決されて何よりです。
回答1件
0
自己解決
他の外部CSSになぜか記載してしまっていた
html {
height: 100vw;
}
が効いていたようです。
投稿2020/05/15 09:01
総合スコア14
あなたの回答
tips
プレビュー
