質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6414閲覧

JavaScriptで高さを取得して、子要素の高さに応じて、親要素の高さも可変できるようにしたい。

pontarou3

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/15 09:58

編集2020/07/15 10:04

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
簡単なJavaScriptの高さの取得、及びCSSへの反映を行っています。

■概要
・グレーの要素のHeightはpadding-topで調整しています
・display:flexでグレーの要素に各要素をいれてます
・一番下にある緑色の要素にあわせてグレーの要素がぴったりくるようにしたい
・それぞれの色の位置は%で位置をずらしています

完成イメージがこちらです
イメージ説明

発生している問題

JavaScriptで高さ取得するため、
①clientHeight
②offsetHeight
の2つを使用しましたが、現状うまくいっていません。

※このままだと困るのは
色の要素が追加された場合に、いちいち高さを変えないといけません。
こちらを子要素の全体の高さによって可変できるようにしたいです。

該当のソースコード

HTML + JavaScript

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <title></title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link href="flexposition.css" rel="stylesheet"> 8 </head> 9 <body> 10 <div class="main_content" id="main_content_h"> 11 <div class="bgc1" id="bgc1_h"></div> 12 <div class="bgc2"></div> 13 <div class="bgc3"></div> 14 <div class="bgc4" id="bgc4_h"></div> 15 </div> 16 <script> 17 function height() { 18 const bgc4_h = document.getElementById('bgc4_h').offsetHeight; 19 const main_content_offset = bgc4_h; /* ←現状ここに数字をかけないと合わない*/ 20 document.getElementById('main_content_h').style.paddingTop = main_content_offset + "px"; 21 } 22 height(); 23 </script> 24 </body> 25</html> 26

css

1*{ 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7 8.main_content{ 9 width: 100%; 10 background-color:grey; 11 display: flex; 12 box-sizing: border-box; 13} 14.bgc1{ 15 width: 300px; 16 height: 220px; 17 background-color:pink; 18 position: absolute; 19 top:0%; 20} 21.bgc2{ 22 width: 300px; 23 height: 220px; 24 background-color:blue; 25 position: absolute; 26 top: 10%; 27} 28.bgc3{ 29 width: 300px; 30 height: 220px; 31 background-color:rgb(56, 56, 75); 32 position: absolute; 33 top: 20%; 34} 35.bgc4{ 36 width: 300px; 37 height: 220px; 38 background-color:rgb(157, 255, 0); 39 position: absolute; 40 top: 30%; 41} 42

試したこと

①clientHeightを使用↓
・clientHeightで単純に高さが取得できるのでは?
ダメ☓→要素の高さを求めているので緑の縦の長さ(220px)になってしまう。

 ・単純にTop×30%してるから30%かけたらいいのでは?
ダメ☓ →結論うまくいかない。30%かけて縦が286pxになるが、緑の位置までグレー色がきていない。これはそもそも数学的センスの問題か・・・・?w

②offsetHeightを使用↓
・offsetHeightで高さを取得+要素の高さ220pxを足せばいけるのでは?
☓ →ん〜なぜかもともとの高さ220px分しか高さを出せていない。offsetHeightの値がきちんと取れていない可能性があるかもしれない・・・

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
■参考にしたWEBサイト様
JavaScriptで特定の要素の幅と高さを取得する方法(clientWidth,clientHeight)

jQuery・JavaScript 高さ、横幅取得方法

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

flexを使えばJavascriptを使用しなくても実装することが可能です。
緑の要素が可変的に変更された場合に、グレーの要素の高さも可変的に変更されます。
サンプルを作成してみたのでご確認ください。
Codepen

Javascriptのheight()は初期レンダリング時のみ実行されるので、
緑の要素が追加された時に可変的にグレーの高さを変更することはできません。

質問の答えになっているでしょうか。

投稿2020/07/15 12:05

編集2020/07/15 13:20
FrontEnd_Japan

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FrontEnd_Japan

2020/07/15 12:13

Javascriptでグレーの高さを可変的に変更したい場合は下記の方法でも実装が可能だと思います。 1. 緑の要素の高さが変わる起因となるイベントをハンドリングする。 2. 緑の要素の親要素(左カラム)の高さを取得する。 3. 2. で取得した高さをグレーの要素に設定する
pontarou3

2020/07/16 06:31

ありがとうございます!またお返事が遅れてしまい申し訳ないです。 FrontEnd_Japanさんのご指摘頂いた通りでした。難しく考えすぎていたことを反省しました・・・。 行き詰まったときはレイアウトを書いてみて(or 頭で描いてみて)から考えようと思いました。 また、アドバイスいただいたJavaScriptでの実装についてもありがとうございます。 こちらもご指摘いただいた改良版で意図した通りになりました。
guest

0

position: absolute;を設定すると通常のフローから外れるので、ほか要素からはないものとして扱われる。
そのため、main_contentクラスの中身は何もないということになり、高さが0になる。
その為に、JavaScript で高さを設定する必要がある。

position: absolute;をやめれば、main_contentクラスは中身の高さになる。

下記のようにすればJSを使わずに完成イメージと同じになります。

css

1*{ 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7.main_content{ 8 width: 100%; 9 background-color:grey; 10 box-sizing: border-box; 11} 12.bgc1{ 13 width: 300px; 14 height: 220px; 15 background-color:pink; 16 max-height: 10vh; 17} 18.bgc2{ 19 width: 300px; 20 height: 220px; 21 background-color:blue; 22 max-height: 10vh; 23} 24.bgc3{ 25 width: 300px; 26 height: 220px; 27 background-color:rgb(56, 56, 75); 28 max-height: 10vh; 29} 30.bgc4{ 31 width: 300px; 32 height: 220px; 33 background-color:rgb(157, 255, 0); 34}

CodePen サンプル

投稿2020/07/15 13:05

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pontarou3

2020/07/16 06:48

ご指摘いただき、ありがとうございます。またお返事が遅れてしまい申し訳ないです。 わかりやすくご説明いただきありがとうございます。 >position: absolute;をやめれば、main_contentクラスは中身の高さになる。 →おっしゃっていただいた、通常のフローから外れるというもの。 https://developer.mozilla.org/ja/docs/Web/CSS/position こちらに記載されていながらも理解が及んでいませんでした。。。めちゃめちゃ学びになりました。 また、max-heightもつけて見やすさにもご配慮いただいき、ありがとうございます(思いやりに感動しました、自分も気をつけようと思います)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問