設定100%高度子部分-有解無憂

如何將介紹部分的高度設定為 100%？主視圖的高度設定為 100 視口高度（8rem 是頁眉的高度，7.2rem 是頁腳的高度）但介紹部分不覆寫主視圖的高度。我還嘗試將介紹部分的高度設定為 100%，但沒有成功。

'use strict';

const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
  min-height: calc(100vh - 8rem - 7.2rem);
}

.heading__primary {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  position: relative;
}

.header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8rem;
  padding: 0 5.6rem;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 10;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 11;
}

.header__logo span {
  color: #000;
  font-size: 2rem;
  font-weight: 600;
}

.header__menu {
  align-items: stretch;
}

.header__menu-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.header__menu-item {
  position: relative;
}

.header__menu-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: inherit;
}

.header__menu-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: royalblue;
}
  
.header__menu-icon:not(:last-child) {
  margin-right: 0.8rem;
}

.header__menu-name {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-grey-light);
  text-transform: uppercase;
  transition: var(--transition);
  letter-spacing: 0.03rem;
}

.header__menu-name:hover {
  color: royalblue;
}

.intro {
  height: 100%;
  background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
  background-size: cover;
  background-position: center;
}

.intro__content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro__text {
  max-width: 60rem;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.8;
}

.intro__btn-search {
  cursor: pointer;
  width: 55%;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
}

.intro__btn-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: #fff;
  transition: all 300ms ease-in-out;
}

.footer {
  background-color: #f9f7f6;
  padding: 3.6rem 0;
  width: 100%;
  height: 5rem;
}

.footer __description {
  font-size: 1.4rem;
}

.t-center {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TRY</title>
  </head>
  <body>
    <header class="header">
      <nav class="header__nav">
        <div class="header__logo">
          <span>Random</span>
        </div>
        <div class="header__menu">
          <ul class="header__menu-list">
            <li class="header__menu-item">
              <button class="header__menu-btn btn__search">
                <span class="header__menu-name">Search</span>
              </button>
            </li>
            <li class="header__menu-item">
              <button class="header__menu-btn header__menu-add">
                <span class="header__menu-name">Add Recipe</span>
              </button>
            </li>
            <li class="header__menu-item">
              <button class="header__menu-btn header__menu-bookmark">
                <span class="header__menu-name">Bookmarks</span>
              </button>
            </li>
            <li class="header__menu-item">
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main class="main">
      <section class="intro">
        <div class="intro__content container">
          <h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
          <p class="intro__text t-center u-mb-lg">
            Discover recipes, cooks and how-to's based on the food you
            love.
          </p>
          <button class="intro__btn-search btn__search">
            Search
          </button>
        </div>
      </section>
    </main>
    <footer class="footer">
      <div class="container">
        <p class="footer__description t-center">
          &copy; <span class="footer__year"></span> Try &mdash; Built by:
          <a href="#" target="_blank" class="footer__link">DevJan</a>
        </p>
      </div>
    </footer>
  </body>
</html>

uj5u.com熱心網友回復：

更改min-height: calc(100vh - 8rem - 7.2rem)為height: calc(100vh - 8rem - 7.2rem)

還有其他幾個選項，例如添加min-height: inherit到您的.intro課程或添加類似的內容height: 0.001px到您的.main課程中。

取自這里：最小高度的父級內部的子級：100% 不繼承高度

uj5u.com熱心網友回復：

最小高度

如果內容小于最小高度，將應用最小高度。如果內容大于最小高度，則 min-height 屬性無效。

除了你的，你應該在你的班級中min-height添加一個。此外，在您的示例中，最好有一個靜態的，因為它可以防止它破壞您的布局，因為無論它有多短/多小，使用都將始終遵循視口的高度。heightmainmin-heightvh

'use strict';

const year = document.querySelector('.footer__year');
year.textContent = new Date().getFullYear();

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.main {
  width: 100%;
  min-height: 600px;
  height: calc(100vh - 8rem - 7.2rem);
}

.heading__primary {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  position: relative;
}

.header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8rem;
  padding: 0 5.6rem;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 10;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  z-index: 11;
}

.header__logo span {
  color: #000;
  font-size: 2rem;
  font-weight: 600;
}

.header__menu {
  align-items: stretch;
}

.header__menu-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

.header__menu-item {
  position: relative;
}

.header__menu-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: inherit;
}

.header__menu-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: royalblue;
}
  
.header__menu-icon:not(:last-child) {
  margin-right: 0.8rem;
}

.header__menu-name {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-grey-light);
  text-transform: uppercase;
  transition: var(--transition);
  letter-spacing: 0.03rem;
}

.header__menu-name:hover {
  color: royalblue;
}

.intro {
  height: 100%;
  background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
  background-size: cover;
  background-position: center;
}

.intro__content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.intro__text {
  max-width: 60rem;
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.8;
}

.intro__btn-search {
  cursor: pointer;
  width: 55%;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
}

.intro__btn-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: #fff;
  transition: all 300ms ease-in-out;
}

.footer {
  background-color: #f9f7f6;
  padding: 3.6rem 0;
  width: 100%;
  height: 5rem;
}

.footer __description {
  font-size: 1.4rem;
}

.t-center {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TRY</title>
  </head>
  <body>
    <header class="header">
      <nav class="header__nav">
        <div class="header__logo">
          <span>Random</span>
        </div>
        <div class="header__menu">
          <ul class="header__menu-list">
            <li class="header__menu-item">
              <button class="header__menu-btn btn__search">
                <span class="header__menu-name">Search</span>
              </button>
            </li>
            <li class="header__menu-item">
              <button class="header__menu-btn header__menu-add">
                <span class="header__menu-name">Add Recipe</span>
              </button>
            </li>
            <li class="header__menu-item">
              <button class="header__menu-btn header__menu-bookmark">
                <span class="header__menu-name">Bookmarks</span>
              </button>
            </li>
            <li class="header__menu-item">
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main class="main">
      <section class="intro">
        <div class="intro__content container">
          <h1 class="heading__primary u-mb-xs t-center">Lorem ipsum dolor?</h1>
          <p class="intro__text t-center u-mb-lg">
            Discover recipes, cooks and how-to's based on the food you
            love.
          </p>
          <button class="intro__btn-search btn__search">
            Search
          </button>
        </div>
      </section>
    </main>
    <footer class="footer">
      <div class="container">
        <p class="footer__description t-center">
          &copy; <span class="footer__year"></span> Try &mdash; Built by:
          <a href="#" target="_blank" class="footer__link">DevJan</a>
        </p>
      </div>
    </footer>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432854.html

標籤：html css

上一篇：嘗試對齊輸入框頂部的文本

下一篇：如何在網頁中間對齊文本區域