CODEWITHSUNDEEP
htmlcss
J.Wujeck
J.Wujeck

Reputation: 280

Set 100% height child section

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 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>

Upvotes: 0

Views: 276

Answers (2)

Yong
Yong

Reputation: 1685

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 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>

Upvotes: 1

pso
pso

Reputation: 523

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

Upvotes: 2

Related Questions