Html - Making div always take the whole height of page - with negative top margin

Malvinka
May 17, 2024
117 views
3 votes
3 Answers

On my page I’ve got that one section that I want to always take the whole height of the page and overflow the navbar and the footer. I moved the div with negative margin to the top but I cannot make it extend to the bottom. This is static website so needs to be done with SCSS only. Can someone help?

.nav {
  width: 100%;
  height: 4rem;
  background-color: #FFE2E2;
}

.container {
  height: 1500px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.full-height {
  background-color: red;
  opacity: .5;
  margin-top: -4rem;
  height: 100%;
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  height: 100%;
  width: 200px;
}

.footer {
  width: 100%;
  height: 6rem;
  background-color: #FFE2E2;
}

<div class="nav">
</div>
<div class="container">
  <div class="full-height">
  </div>
  <div class="normal-column">
  </div>
</div>
<div class="footer">
</div>

Tags: css html

Answers

It’s a bit fragile (any layout with hard-coded sizing is), but you can simply add the height of the header and footer to the height of the full-height element.

One way to make it a bit less fragile is to use custom properties (variables) for all common values. This prevents changes in rules for one element from breaking the layout.

:root {
  --header-height: 4rem;
  --footer-height: 6rem;
}

.nav {
  width: 100%;
  height: var(--header-height);
  background-color: #FFE2E2;
}

.container {
  height: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.full-height {
  background-color: red;
  opacity: .5;
  margin-top: calc(-1 * var(--header-height));
  height: calc(100% + var(--header-height) + var(--footer-height));
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  height: 100%;
  width: 200px;
}

.footer {
  width: 100%;
  height: var(--footer-height);
  background-color: #FFE2E2;
}

<div class="nav"></div>

<div class="container">
  <div class="full-height"></div>
  <div class="normal-column"></div>
</div>

<div class="footer"></div>

You need to increase the height by adding the height of the nav and footer – height: calc(100% + 10rem);

.nav {
  width: 100%;
  height: 4rem;
  background-color: #FFE2E2;
}

.container {
  height: 1500px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.full-height {
  background-color: red;
  opacity: .5;
  margin-top: -4rem;
  height: calc(100% + 10rem);
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  height: 100%;
  width: 200px;
}

.footer {
  width: 100%;
  height: 6rem;
  background-color: #FFE2E2;
}

<div class="nav">
</div>
<div class="container">
  <div class="full-height">
  </div>
  <div class="normal-column">
  </div>
</div>
<div class="footer">
</div>

Set both top and bottom margin using negative value (that you can combine with margin-block). Don’t use height: 100%, the default stretch alignment will do the job for you.

.nav {
  height: 4rem;
  background-color: #FFE2E2;
}
.container {
  height: 1500px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.full-height {
  background-color: red;
  opacity: .5;
  margin-block: -4rem -6rem; /* HERE */
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  width: 200px;
}
.footer {
  height: 6rem;
  background-color: #FFE2E2;
}

<div class="nav"></div>
<div class="container">
  <div class="full-height">
  </div>
  <div class="normal-column">
  </div>
</div>
<div class="footer"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Making div always take the whole height of page – with negative top margin

Answers