CODEWITHSUNDEEP
htmlcsscss-position
Mike
Mike

Reputation: 1999

Positioning full-height absolute element inside relative one

Please help me to solve the quest. We have 3 div blocks. Height of the first div set to 100px (but in real world it's dynamic value). Second block has fixed height, and has another block as a child. The child block should have height stretched down to the bottom of the screen. But since our second block is relative, bottom:0 will mean bottom of the second block. What is the best practice for such cases, pure CSS please?

body > div { height: 100px; }

.first { background: lightblue; }

.second {
  background: lightgreen;
  position: relative;
}

.second div {
  position: absolute;
  background: pink;
  width: 50%;
  height: 200px;
  top: 100px;
}
<div class="first">The height of the block may vary greately.</div>
<div class="second">
  <div>This DIV should take whole free space to the bottom of the screen.</div>
</div>

UPD:

I can achieve the effect by wrapping second div into additional div (width position absolute and bottom: 0) and leave it with transparent background, but then static content "behind it" become unusable. Here is an example.

Upvotes: 0

Views: 1154

Answers (2)

Syden
Syden

Reputation: 8625

This is based on your update fiddle, since it's not that clear what you wish to achieve but you mentioned this example was close, I made your link to be above with z-index so it's clickable:

Check external Fiddle, embedded seems to break bottom

Upvotes: 1

jmag
jmag

Reputation: 826

body > div { height: 100px; }

.first { background: lightblue; }

.second {
  background-color: lightgreen;
  top: 100px;
}

.second >div {
  background: pink;
  width: 50%;
  height: 100%; 
}
<div class="first">The height of the block may vary greately.</div>
<div class="second">
  <div>This DIV should take whole free space to the bottom of the screen.</div>
</div>

Upvotes: 0

Related Questions