HTMLで親要素の高さが子要素に合わせることができない。

Question

前提・実現したいこと

responsive対応の時HTML/CSSで子要素に合わせて親要素の高さを可変にしたい。

• #topを可変にしたい。
• できれば.top-contentも

発生している問題・エラーメッセージ

子要素の高さを指定しているのにも関わらず、親要素の高さが０になる

該当のソースコード

  <main>
      <div id="top">
        <div class="top-content">
          <h1>Tastybox</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae
            molestie dolor. Donec vel pretium velit. Pellentesque consectetur
            dictum urna et mattis. Mauris vel tempor tortor, id viverra ipsum.
            Nunc in molestie leo. Etiam fermentum, leo consequat posuere
            ultricies, felis ante placerat ligula, vitae sodales turpis sapien
            non lacus. Fusce vitae nunc quis elit malesuada sodales. Cras lorem
            lacus, tincidunt non aliquam quis, eleifend eget nisl. Aenean
            blandit tortor sit amet odio porttitor, id posuere felis laoreet.
            Nullam venenatis turpis eros. Mauris egestas luctus finibus. Donec
            semper varius fermentum.
          </p>
          <div class="top-buttons">
            <button
              type="button"
              class="btn btn-outline-primary btn-lg login-button"
              onclick="location.href='login.html'"
            >
              Login
            </button>
            <button
              type="button"
              class="btn btn-outline-primary btn-lg new-account-button"
            >
              Create new account
            </button>
          </div>
        </div>
      </div>

<省略>

<main>

@media screen and (max-width: 800px) {
  main {
    height: 100%;
    width: 100%;
  }

  #top {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }

  #top .top-content {
    /* padding: 10px; */
    height: 2000px;
  }

  #top .top-content h1 {
    height: 50px;
    margin-top: 30px;
    margin-bottom: 15px;
  }

  #top .top-content p {
    height: 500px;
    margin-top: 15px;
  }

  #top .top-content .top-buttons button {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
  }
}

main {
  width: 100%;
  height: 3646px;
  /* height: calc(166px + 700px + 500px); */
  position: relative;
  padding-bottom: 10px;
}

#top {
  background-image: url("../images/background-img.png");
  width: auto;
  height: 700px;
  position: relative;
}

#top::after {
  background-color: rgba(254, 216, 177, 0.5);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#top .top-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80vw;
  height: 400px;
  text-align: center;
  color: white;
  z-index: 1;
}

#top .top-content h1 {
  height: 100px;
  font-family: "Balsamiq Sans", cursive;
}

試したこと

• #top, .top-contentのheightをautoまたは100％

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

• Mac , VSCode

Answer 1

#top .top-content {
  position: absolute;

↑この部分で絶対配置にしているのが原因です。
絶対配置にすると通常のフローから外れるため、内容物とみなされなくなり、親要素はその分の高さを失います。
CSSでの回避方法はないです。

解決方法としては、position: absoluteを削除して、別の方法で中央配置をすることです。

absolute は使うな | 初心者向けCSSべからず集・すべし集 - Qiita

絶対配置の子要素サイズに親要素のサイズを合わせる | 初心者向けCSSべからず集・すべし集 - Qiita

Comments

[shihominorth]

ご回答ありがとうございます！

絶対配置にすると通常のフローから外れるため、内容物とみなされなくなり、親要素はその分の高さを失います。
CSSでの回避方法はないです。

こちら知りませんでした... 参考になるURLもご教示いただきありがとうございます。