高さの可変する兄弟要素の高さを揃える

前提・実現したいこと

2カラムのデザインで可変する兄弟要素（asideとartcle）の高さを揃える方法を教えてください。
現状のコードをなるべく変更しない方法を知りたいため、
下記を使わない条件下で行いたいです。

flexbox
gridレイアウト
position:abusolute
JavaScript

【2カラム自体をflexboxやgridで作ると簡単で、そもそもこの問題が発生しないかと思いますが、他の方法で2カラムにした時を想定して質問させていただいております。】

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>SAMPLE</title>
6  <link rel="stylesheet" href="./page.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
8</head>
9<body>
10<header>
11  header
12</header>
13  <main>
14    <div class="main_container">
15      <article class="side_article">
16        <div class="mainvisual">
17          <div class="pic mainImg">
18            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
19          </div>
20          <div class="minvisual_text">
21            <h2>タイトル タイトル</h2>
22            <p class="read">サンプルテキスト。サンプルテキスト。</br>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
23          </div>
24        </div>
25        <section class="sec01">
26          <h2>タイトル タイトル</h2>
27          <div class="sec_wrapper">
28            <p class="read">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
29          <div class="pic">
30            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
31          </div>
32        </div>
33        </section>
34        <section class="sec02">
35          <h2>タイトル タイトル</h2>
36          <div class="sec_wrapper">
37            <div class="read">
38
39          <p class="p">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
40          <p class="p">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
41        </div>
42          <div class="pic">
43            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
44          </div>
45          </div>
46        </section>
47        <section class="sec03">
48          <h2>タイトル タイトル</h2>
49          <div class="sec_wrapper">
50          <table>
51            <tr>
52              <th>TH TH TH TH</th>
53              <td>TD TD TD TD TD</td>
54            </tr>
55            <tr>
56              <th>TH TH TH TH</th>
57              <td>TD TD TD TD TD</td>
58            </tr>
59            <tr>
60              <th>TH TH TH TH</th>
61              <td>TD TD TD TD TD</td>
62            </tr>
63            <tr>
64              <th>TH TH TH TH</th>
65              <td>TD TD TD TD TD</td>
66            </tr>
67            <tr>
68              <th>TH TH TH TH</th>
69              <td>TD TD TD TD TD</td>
70            </tr>
71            <tr>
72              <th>TH TH TH TH</th>
73              <td>info@example.com</td>
74            </tr>
75          </table>
76          </div>
77        </section>
78        <section class="sec04">
79          <div class="gallery sec_wrapper">
80            <div class="pic">
81              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
82            </div>
83            <div class="pic">
84              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
85            </div>
86            <div class="pic">
87              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
88            </div>
89            <div class="pic">
90              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
91            </div>
92            <div class="pic">
93              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
94            </div>
95            <div class="pic">
96              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
97            </div>
98          </div>
99        </section>
100      </article>
101      <aside>
102        <div class="widget">
103          <h2>タイトル タイトル</h2>
104          <ul>
105            <li><a href="#">リンク リンク リンク</a></li>
106            <li><a href="#">リンク リンク リンク</a></li>
107            <li><a href="#">リンク リンク リンク</a></li>
108            <li><a href="#">リンク リンク リンク</a></li>
109            <li><a href="#">リンク リンク リンク</a></li>
110            <li><a href="#">リンク リンク リンク</a></li>
111          </ul>
112        </div>
113        <div class="widget">
114          <h2>タイトル タイトル</h2>
115          <ul>
116            <li><a href="#">リンク リンク リンク</a></li>
117            <li><a href="#">リンク リンク リンク</a></li>
118            <li><a href="#">リンク リンク リンク</a></li>
119            <li><a href="#">リンク リンク リンク</a></li>
120            <li><a href="#">リンク リンク リンク</a></li>
121            <li><a href="#">リンク リンク リンク</a></li>
122          </ul>
123        </div>
124        <div class="widget">
125          <h2>タイトル タイトル</h2>
126          <ul>
127            <li><a href="#"><div class="thumb1_img">
128              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
129            </div></a>
130            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
131            <li><a href="#"><div class="thumb2_img">
132              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
133            </div></a>
134            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
135            <li><a href="#"><div class="thumb3_img">
136              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
137            </div></a>
138            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
139          </ul>
140        </div>
141        <div class="side_banner_img">
142          <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
143        </div>
144      </aside>
145    </div>
146  </main>
147  <footer>footer</footer>
148  <script>
149  $(function() {
150    'use strict';
151    $('a[href^="#"]').on('click', function() {
152      return false;
153    });
154
155    $('.pic').each(function() {
156      var imgHeight = $('img', this).outerHeight();
157      $(this).css({paddingTop:imgHeight});
158
159    })
160
161  });
162  </script>
163  </body>
164  </html>

css
1/* 試したこと */
2main {
3  text-align: center;
4}
5.main_container {
6  display: inline-block;
7  /* height: 1600px; */
8  text-align: left;
9}
10aside,article {
11  /* height: 100%; */
12}
13
14
15/* 質問の為に追加 */
16img {
17  width: 150px !important;
18  height: 150px !important;
19}
20h2 {
21  display: none;
22}
23
24/* 現状のコード */
25header,footer {
26  background: #00f;
27  height: 100px;
28}
29
30body,html {
31  background: #ccc;
32}
33
34.header_container,
35.main_container,
36.footer_container {
37  background: #f0f;
38  max-width: 960px;
39  margin: 0 auto;
40  padding: 0 20px;
41}
42.main_container {
43  padding: 20px;
44}
45a {
46  height: auto;
47}
48ul {
49  font-size: 0;
50}
51li {
52  font-size: 16px;
53}
54.pic {
55  position: relative;
56  width: 100%;
57}
58img {
59  width: 100%;
60  height: auto;
61  object-fit: cover
62}
63.pic img {
64  border: 4px solid #ebebeb;
65  position: absolute;
66  top: 0;
67  left: 0;
68}
69.read {
70  padding-top: 10px;
71}
72.f-pink {
73  color: #cf6a88;
74}
75
76/* main */
77.mainvisual {
78  position: relative;
79}
80.minvisual_text {
81  background: rgba(000, 000, 000, .3);
82  color: #fff;
83}
84.minvisual_text h2 {
85  font-size: 20px;
86}
87
88/* main */
89main::after {
90  content: '';
91  display: block;
92  clear: both;
93}
94main h2 {
95  background: linear-gradient(to top, #CF6A88, #A74864);
96  padding: 10px;
97  color: #fff;
98}
99.side_article {
100  background: #ff0;
101  width: calc(100% - 210px);
102  float: right;
103}
104section {
105  margin-top: 20px;
106  border: 1px solid #ebebeb;
107}
108.sec_wrapper {
109  display: flex;
110  padding: 20px;
111}
112.sec_wrapper .read {
113  flex: 2;
114  padding: 0;
115  line-height: 1.2;
116}
117.sec_wrapper .read p + p {
118  padding-top: 10px;
119}
120.sec01 .pic,
121.sec02 .pic {
122  flex: 1.5;
123}
124/* sec03 table */
125.sec03 table {
126  width: 85%;
127  margin: 0 auto;
128  padding: 20px 80px;
129}
130.sec03 th, .sec03 td {
131  background: #F5F5F5;
132  border: 1px solid #D6D6D6;
133  font-size: 13px;
134  padding: 10px;
135}
136.sec03 th {
137  width: 110px;
138  border-right: 4px solid #D6D6D6;
139  text-align: right;
140  padding-left: 0;
141}
142.gallery {
143  flex-wrap: wrap;
144}
145
146/* sec04 gallery */
147.sec04 {
148}
149.sec04 .gallery .pic {
150  width: calc(100% / 3);
151  padding-top: 0 !important;
152  padding-bottom: 20px;
153
154}
155.sec04 .gallery .pic img {
156  position: static;
157}
158
159/* aside */
160aside {
161  background: #f00;
162  width: 210px;
163  padding-right: 20px;
164}

試したこと

【display:table;にして2カラムにすれば解決する事を確認しておりますが非推奨な方法かと思い別な方法を探しております。】

手順１. 親要素の高さを子要素に合わせるために.main_containerをinline-blockに変更
（それに伴いmainと.main_containerのtext-alignを変更）

手順２. 子要素の高さを親要素に合わせるためにasideとarticleをheight:100%に変更

＊結果・・・親要素の高さを指定してないので無効

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

win10,chrome使用

手順は追加するのでも、1から別の方法になっても構わないです。
flexboxを使わない等の条件がありますが、よろしくお願いします。

もしくは、
現在floatを使って2カラムにしてますが、
flexboxを使わない等の同条件で2カラムから作り直しでも構いません。
よろしくお願いします。

追記

検索するとtableにして2カラムにする方法が多くあり、
それで解決しそうですが、テーブルではないので避けたい方法と考えております。
tableは非推奨の方法でしょうか？

退会済みユーザー

2019/01/24 07:33

JavaScriptでasideとartcleの高さを取得して、高い方に合わせて高さ指定すればいいのではないでしょうか？ flexboxなどの利用不可と同様にJavaScriptでの指定も不可とかでしょうか？

akihiro3

2019/01/24 07:35

javascriptも利用不可です。条件、説明不足すみません。

x_x

2019/01/24 07:54

ブラウザがChromeであるのに各種方法に制限があるのはなぜでしょうか？

akihiro3

2019/01/24 08:05

x_xさん >ブラウザがChromeであるのに各種方法に制限があるのはなぜでしょうか？使用者のブラウザが特定なのに制限があるのはなぜ？という意味でしょうか？

akihiro3

2019/01/24 08:23

flexbox等を使わない条件の理由ですが、現状あるコードをなるべく変更せずに対応するためです。自身の知識とスキル向上のため、のような理由です。

x_x

2019/01/24 08:29

「作り直しでも構わない」のと「なるべく変更したくない」のは反しませんか？

akihiro3

2019/01/24 09:26

現在の状況説明では指摘の通り思われて当然かと思います。状況の説明不足すみません。この質問は2カラム自体をflexboxやgridで作ると発生しない問題かと思い、他の方法を想定しておりました。その1例としてfloatを使った2カラムで質問させていただきました。

yoshinavi

2019/01/24 09:43

＞現状あるコードをなるべく変更せずに対応するため　→　JavaScriptは条件外ですが、「jQuery+プラグイン等で並んだdivの高さを揃える」も、以前は良く見かけた方法のひとつなので、HTMLとCSSをあまり触りたくない時は、選択肢に入れておくと良いかもです。

akihiro3

2019/01/24 09:53

ありがとうございます。 htmlとcssをあまり触らない理由を優先させる場合、JavaScriptが条件内の場合にはプラグインを使う事も選択肢に入れたいと思います。

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

回答1件

ベストアンサー

昔流行った padding とネガティブ margin を組み合わせたハックを使うか、テーブルレイアウトぐらいしかご希望を満たす案は存在しないと思います。

css
1.main_container {
2  overflow: hidden;
3}
4
5aside {
6  padding-bottom: 32768px;
7  margin-bottom: -32768px;
8}

投稿2019/01/24 07:44

yhg

総合スコア2161

akihiro3

2019/01/24 07:50 編集

回答いただいている間に質問文の追記をしていたようです。すみません。テーブルレイアウトは非推奨な方法と考えてしまってますが、間違ってる考えでしょうか？あと、padding とネガティブ margin を組み合わせたハックを使う方法は知りませんでした。ありがとうございます。詳しく調べてみます。ちなみに昔の流行りという事ですが、これも今は非推奨になってしまったのでしょうか？

yhg

2019/01/24 08:02

テーブルレイアウトはレンダリング速度に著しい問題が出てしまうため非推奨ですね。 padding とネガティブ margin の組み合わせは十分にデバッグを取って問題なければそれで良いですが、不具合が起こる場合があるので注意が必要だったと思います。そもそも論だと、Flexbox 非対応のブラウザ環境はセキュリティ的に危ないため、もう考慮しない流れになってると思います。

akihiro3

2019/01/24 08:21

テーブルレイアウトは非推奨ですね。こちらもありがとうございます。 padding とネガティブ margin の組み合わせ確認しました。想定の結果になってます。ありがとうございます。他の要素を追加した時のデザイン崩れを注意すれば使えますし、特に非推奨なわけでもなさそうです。あと、flexbox等を使わない条件の理由ですが、現状あるコードをなるべく変更せずに対応するためです。自身の知識とスキル向上のため、のような理由です。わがままな理由ですみません。

yhg

2019/01/24 08:27

上手く言ったのなら何よりです。 Float → Flexbox であれば HTML 側の変更がいらない上に、CSS 側の変更もかなり少ないので私の示した方法で不具合が出るようなら Flexbox で実装するのが手っ取り早いと思います。

退会済みユーザー

2019/01/24 08:38

質問に挙げられているコードであれば、回答のCSSでOKと思いますが、asideの方が高さある場合、高さ揃わないのではないでしょうか？依頼条件にIE8が入ってるであれば、安パイでテーブル組みでいいのでは？と思ってしまいます。 tableレイアウトは全くの今風ではないですが、条件が条件なら安パイな組み方と思います。

退会済みユーザー

2019/01/24 08:41

コメント書いてるうちに話が進んでましたね。適当に流していただければです。

s8_chu

2019/01/24 08:53 編集

解決済みのようですが、`display: table`を使い、以下のように行うことも出来ると思います。つ ( https://codepen.io/anon/pen/zeGmwb )

akihiro3

2019/01/24 09:28

yhgさん 2カラム自体をflexboxやgridで作ると簡単で、そもそもこの問題が発生しないかと思い、他の方法で2カラムにした時を想定して質問させていただきました。

akihiro3

2019/01/24 09:30

Tak_Matzさんコメントありがとうございます。 asideとarticleの両方に同じようにpaddingとmarginをしていすれば問題ない事を確認しました。あと、もしも子要素が増えてデザインが崩れた場合は、paddingとmarginの値を変更すれば問題ない事も確認しました。

akihiro3

2019/01/24 09:34 編集

s8_chuさん display:table;の方法で出来る事は確認できていましたが、非推奨な方法かと思っておりました。「試したこと」にも書いておくべきでした。すみません。検証もしていただきありがとうございます。

s8_chu

2019/01/24 09:56 編集

> 非推奨な方法かと思っておりました。なぜ非推奨だと思ったのでしょうか？もしどこかの Web ページに書いてある情報だったならば、その Web ページを教えていただけませんか？

akihiro3

2019/01/24 10:24

今回テーブルレイアウトでの2カラムについて幾つかのwebページを確認しましたが、どこかのwebページで非推奨との記述があったわけではありません。ただ、表を組む目的以外にtableにするのは非推奨だと認識していました。そこで今改めて調べてみました。 https://akros-ac.jp/5928/#i ・・・上記サイトより「今は誰も使っていないと思いますが、昔はtableタグを使ってページレイアウトを組んでいました。現在では推奨されていませんが、HTML5になってからdisplayプロパティを使って要素の挙動を変える事も許容されるようになりました。これにより、display:table-cell;などの設定で、擬似的にテーブルレイアウトを組む場面も増えてきました。」 https://code.i-harness.com/ja-jp/q/1b72a1 ・・・上記サイトより「HTMLはレイアウトを制御するのではなく、データを構造化するためのものです。 CSSはレイアウトを制御するためのものです。まったく同じ理由で、レイアウトのために<table>を使用することについて多くのデザイナーが悩んでいることもわかります。」いくつか確認したwebページのうち２サイトですが、認識違いかとも気づきました１、データを構築化するためのhtmlでのテーブルレイアウト（tableタグ）は非推奨である２、レイアウトを制御するためのcssでのテーブルレイアウト（display:table;）は非推奨ではない上記の事から、非推奨だと思ったのは間違いである。という再認識で間違いないでしょうか？

s8_chu

2019/01/25 10:58

> という再認識で間違いないでしょうか？はい、間違いないと思います。一般的に、テーブルレイアウトというと、視覚的レイアウトのみを目的として`table`要素を用いることを指します。`display`プロパティの値として`table`, `table-row`などを指定した要素は、テーブルレイアウトと同等の効果を得られますが、意味論的に異なります。

akihiro3

2019/01/25 16:42

私の再認識の確認と分かりやすい説明ありがとうございます。「同等の効果を得られますが、意味論的に異なります。」とても納得できました。ちなみにMDNでは、HTMLテーブルは使うのが駄目な場合があるという記述と、その駄目な使い方の例はありましたが、 CSSのdisplay:tableの可否は記述がありませんでした（見つけられなかったと、いうべきかもですが。。） w3cにも見つけられませんでした（最終的にはw3cで記述を見つけました）そこで他の方のサイトの情報を紐づけて出した結論でしたが、改めて探すとw3cに見つけました https://www.w3.org/TR/CSS2/tables.html#width-layout ・・・w3cより「In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.」私訳ですが、「見た目の為にcssのtableを使ってレイアウトはしてもいいです。その時に文書言語でテーブル要素を使っては駄目です。レイアウトに関連する構造要素にcssを使ってください。」同ページの他の記述も読み、いい勉強になりました。ありがとうございました。

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