CODEWITHSUNDEEP
css
quantumbutterfly
quantumbutterfly

Reputation: 1955

Make div's height be 100% of parent's height including overflow

Let's say I have a div that has overflow:auto and a scrollbar as a result. I would like to add a div that takes up the entire parent div as you scroll down, not just the height of the parent div as it's rendered on the screen.

If my description is a little unclear, look at the code and jsfiddle below. I would like the red column to extend all the way to the bottom of the parent when you scroll the parent down. You shouldn't be able to see the bottom of the red box.

How can I go about doing this?

Here it is in a JSFiddle

.parent {
  overflow: auto;
  overflow-x: hidden;
  position: relative;
  height: 300px;
  width: 200px;
  border: 1px solid black;
}
.line {
  border-bottom: 1.5px solid black;
  height: 50px;
  margin-left: 7px;
  margin-right: 7px;
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: red;
  width: 50%;
  left: 20%;
  z-index: 10;
}
<div class="parent">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="box"></div>
</div>

Upvotes: 0

Views: 60

Answers (1)

trungvose
trungvose

Reputation: 20034

Possible duplicated with the following question and answer.

Position: absolute and parent height?

You can only do it with JavaScript because the absolute element was completely out of document flow, it can only align with parent element.

Add two lines of js as below to make it works as your expectation.

var scrollParentHeight = document.getElementsByClassName('parent')[0].scrollHeight
document.getElementsByClassName('box')[0].style.height = scrollParentHeight + 'px';

Upvotes: 1

Related Questions