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

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
簡単な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になるが、緑の位置までグレー色がきていない。これはそもそも数学的センスの問題か・・・・？ｗ

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

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

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

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

行動規範の内容に同意します

回答2件

ベストアンサー

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での実装についてもありがとうございます。こちらもご指摘いただいた改良版で意図した通りになりました。

行動規範の内容に同意します

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

総合スコア34075

pontarou3

2020/07/16 06:48

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

行動規範の内容に同意します

あなたの回答