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

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

ただいまの
回答率

87.79%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,930

score 930

前提・実現したいこと

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

  • flexbox
  • gridレイアウト
  • position:abusolute
  • JavaScript

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

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>SAMPLE</title>
  <link rel="stylesheet" href="./page.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<header>
  header
</header>
  <main>
    <div class="main_container">
      <article class="side_article">
        <div class="mainvisual">
          <div class="pic mainImg">
            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
          </div>
          <div class="minvisual_text">
            <h2>タイトル タイトル</h2>
            <p class="read">サンプルテキスト。サンプルテキスト。</br>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
          </div>
        </div>
        <section class="sec01">
          <h2>タイトル タイトル</h2>
          <div class="sec_wrapper">
            <p class="read">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
          <div class="pic">
            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
          </div>
        </div>
        </section>
        <section class="sec02">
          <h2>タイトル タイトル</h2>
          <div class="sec_wrapper">
            <div class="read">

          <p class="p">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
          <p class="p">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
        </div>
          <div class="pic">
            <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
          </div>
          </div>
        </section>
        <section class="sec03">
          <h2>タイトル タイトル</h2>
          <div class="sec_wrapper">
          <table>
            <tr>
              <th>TH TH TH TH</th>
              <td>TD TD TD TD TD</td>
            </tr>
            <tr>
              <th>TH TH TH TH</th>
              <td>TD TD TD TD TD</td>
            </tr>
            <tr>
              <th>TH TH TH TH</th>
              <td>TD TD TD TD TD</td>
            </tr>
            <tr>
              <th>TH TH TH TH</th>
              <td>TD TD TD TD TD</td>
            </tr>
            <tr>
              <th>TH TH TH TH</th>
              <td>TD TD TD TD TD</td>
            </tr>
            <tr>
              <th>TH TH TH TH</th>
              <td>info@example.com</td>
            </tr>
          </table>
          </div>
        </section>
        <section class="sec04">
          <div class="gallery sec_wrapper">
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
            <div class="pic">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div>
          </div>
        </section>
      </article>
      <aside>
        <div class="widget">
          <h2>タイトル タイトル</h2>
          <ul>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
          </ul>
        </div>
        <div class="widget">
          <h2>タイトル タイトル</h2>
          <ul>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
            <li><a href="#">リンク リンク リンク</a></li>
          </ul>
        </div>
        <div class="widget">
          <h2>タイトル タイトル</h2>
          <ul>
            <li><a href="#"><div class="thumb1_img">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div></a>
            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
            <li><a href="#"><div class="thumb2_img">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div></a>
            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
            <li><a href="#"><div class="thumb3_img">
              <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
            </div></a>
            サンプルテキスト。サンプルテキスト。サンプルテキスト。</li>
          </ul>
        </div>
        <div class="side_banner_img">
          <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u10/103363/0c3a60754a6f8392_thumbnail.png">
        </div>
      </aside>
    </div>
  </main>
  <footer>footer</footer>
  <script>
  $(function() {
    'use strict';
    $('a[href^="#"]').on('click', function() {
      return false;
    });

    $('.pic').each(function() {
      var imgHeight = $('img', this).outerHeight();
      $(this).css({paddingTop:imgHeight});

    })

  });
  </script>
  </body>
  </html>
/* 試したこと */
main {
  text-align: center;
}
.main_container {
  display: inline-block;
  /* height: 1600px; */
  text-align: left;
}
aside,article {
  /* height: 100%; */
}


/* 質問の為に追加 */
img {
  width: 150px !important;
  height: 150px !important;
}
h2 {
  display: none;
}

/* 現状のコード */
header,footer {
  background: #00f;
  height: 100px;
}

body,html {
  background: #ccc;
}

.header_container,
.main_container,
.footer_container {
  background: #f0f;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
.main_container {
  padding: 20px;
}
a {
  height: auto;
}
ul {
  font-size: 0;
}
li {
  font-size: 16px;
}
.pic {
  position: relative;
  width: 100%;
}
img {
  width: 100%;
  height: auto;
  object-fit: cover
}
.pic img {
  border: 4px solid #ebebeb;
  position: absolute;
  top: 0;
  left: 0;
}
.read {
  padding-top: 10px;
}
.f-pink {
  color: #cf6a88;
}

/* main */
.mainvisual {
  position: relative;
}
.minvisual_text {
  background: rgba(000, 000, 000, .3);
  color: #fff;
}
.minvisual_text h2 {
  font-size: 20px;
}

/* main */
main::after {
  content: '';
  display: block;
  clear: both;
}
main h2 {
  background: linear-gradient(to top, #CF6A88, #A74864);
  padding: 10px;
  color: #fff;
}
.side_article {
  background: #ff0;
  width: calc(100% - 210px);
  float: right;
}
section {
  margin-top: 20px;
  border: 1px solid #ebebeb;
}
.sec_wrapper {
  display: flex;
  padding: 20px;
}
.sec_wrapper .read {
  flex: 2;
  padding: 0;
  line-height: 1.2;
}
.sec_wrapper .read p + p {
  padding-top: 10px;
}
.sec01 .pic,
.sec02 .pic {
  flex: 1.5;
}
/* sec03 table */
.sec03 table {
  width: 85%;
  margin: 0 auto;
  padding: 20px 80px;
}
.sec03 th, .sec03 td {
  background: #F5F5F5;
  border: 1px solid #D6D6D6;
  font-size: 13px;
  padding: 10px;
}
.sec03 th {
  width: 110px;
  border-right: 4px solid #D6D6D6;
  text-align: right;
  padding-left: 0;
}
.gallery {
  flex-wrap: wrap;
}

/* sec04 gallery */
.sec04 {
}
.sec04 .gallery .pic {
  width: calc(100% / 3);
  padding-top: 0 !important;
  padding-bottom: 20px;

}
.sec04 .gallery .pic img {
  position: static;
}

/* aside */
aside {
  background: #f00;
  width: 210px;
  padding-right: 20px;
}

試したこと

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

手順1. 親要素の高さを子要素に合わせるために.main_containerinline-blockに変更
(それに伴いmain.main_containertext-alignを変更)

手順2. 子要素の高さを親要素に合わせるためにasidearticleheight:100%に変更
  
*結果・・・親要素の高さを指定してないので無効

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

win10,chrome使用


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

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

追記

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • akihiro3

    2019/01/24 18:26

    現在の状況説明では指摘の通り思われて当然かと思います。
    状況の説明不足すみません。

    この質問は2カラム自体をflexboxやgridで作ると発生しない問題かと思い、他の方法を想定しておりました。
    その1例としてfloatを使った2カラムで質問させていただきました。

    キャンセル

  • yoshinavi

    2019/01/24 18:43

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

    キャンセル

  • akihiro3

    2019/01/24 18:53

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

    キャンセル

回答 1

checkベストアンサー

+3

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

.main_container {
  overflow: hidden;
}

aside {
  padding-bottom: 32768px;
  margin-bottom: -32768px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/24 19: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ページのうち2サイトですが、
    認識違いかとも気づきました
    1、データを構築化するためのhtmlでのテーブルレイアウト(tableタグ)は非推奨である
    2、レイアウトを制御するためのcssでのテーブルレイアウト(display:table;)は非推奨ではない

    上記の事から、非推奨だと思ったのは間違いである。
    という再認識で間違いないでしょうか?

    キャンセル

  • 2019/01/25 19:58

    > という再認識で間違いないでしょうか?
    はい、間違いないと思います。

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

    キャンセル

  • 2019/01/26 01: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を使ってください。」

    同ページの他の記述も読み、いい勉強になりました。
    ありがとうございました。

    キャンセル

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

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る