Set 100% height child section-CodePudding

How can I set the height of intro section to 100%? The height of the main is set to 100 viewport height (8rem is the height of header and 7.2rem is for the footer) but the intro section does not cover the height of the main. I've also tried to set the height of intro section to 100% but it didn't work.

'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 >
      <nav >
        <div >
          <span>Random</span>
        </div>
        <div >
          <ul >
            <li >
              <button >
                <span >Search</span>
              </button>
            </li>
            <li >
              <button >
                <span >Add Recipe</span>
              </button>
            </li>
            <li >
              <button >
                <span >Bookmarks</span>
              </button>
            </li>
            <li >
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main >
      <section >
        <div >
          <h1 >Lorem ipsum dolor?</h1>
          <p >
            Discover recipes, cooks and how-to's based on the food you
            love.
          </p>
          <button >
            Search
          </button>
        </div>
      </section>
    </main>
    <footer >
      <div >
        <p >
          &copy; <span ></span> Try &mdash; Built by:
          <a href="#" target="_blank" >DevJan</a>
        </p>
      </div>
    </footer>
  </body>
</html>

CodePudding user response：

Change min-height: calc(100vh - 8rem - 7.2rem) to height: calc(100vh - 8rem - 7.2rem)

There are also a couple other options like adding min-height: inherit to your .intro class or adding something like height: 0.001px to your .main class.

Taken from here: Child inside parent with min-height: 100% not inheriting height

CodePudding user response：

min-height

If the content is smaller than the minimum height, the minimum height will be applied. If the content is larger than the minimum height, the min-height property has no effect.

Aside from your min-height you should add a height to your main class. Also it would be better in your example's case to have a static min-height as it would prevent it from ruining your layout as using vh would always follow viewport's height no matter how short/small it is.

'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 >
      <nav >
        <div >
          <span>Random</span>
        </div>
        <div >
          <ul >
            <li >
              <button >
                <span >Search</span>
              </button>
            </li>
            <li >
              <button >
                <span >Add Recipe</span>
              </button>
            </li>
            <li >
              <button >
                <span >Bookmarks</span>
              </button>
            </li>
            <li >
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main >
      <section >
        <div >
          <h1 >Lorem ipsum dolor?</h1>
          <p >
            Discover recipes, cooks and how-to's based on the food you
            love.
          </p>
          <button >
            Search
          </button>
        </div>
      </section>
    </main>
    <footer >
      <div >
        <p >
          &copy; <span ></span> Try &mdash; Built by:
          <a href="#" target="_blank" >DevJan</a>
        </p>
      </div>
    </footer>
  </body>
</html>