CODEWITHSUNDEEP
htmlcss
Miiller
Miiller

Reputation: 1063

Child Element 100% size of Parents contents

What i have:

A Block element with fixed size, but dynamic content size and overflow: scroll;.

What i want:

A transparent layer over the content, so no matter how far the parent is scrolled the layer covers the content.

What i tried:

.layer {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}

inside the parent after the content.

The issue:

The layer covers the parent properly, but as soon as i scroll it doesn't cover the content.

Fiddle:

http://jsfiddle.net/wYgWh/2/

Red should cover everything, but not too much;

Upvotes: 4

Views: 3462

Answers (3)

meadowstream
meadowstream

Reputation: 4141

Height: 100%; give the element the same height as it's parent. The parent you have defined is not as high as the content you want to cover.

If you put the "layer" inside your "content" in your markup, you can then absolute position it relative to the "content". So now the height: 100% will relate to the content instead of the "parent" (scroll window).

Also, when you want to position something absolute, that element will relate to it's closest non-static parent.

Here is the fiddle.

Upvotes: 3

Sildoreth
Sildoreth

Reputation: 1915

Try this:

HTML: 

<div class="coverable">
   <div class="layer"></div>
   Content that gets covered!
</div>

CSS:

.coverable {
  position: relative;
}
.coverable .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}

Upvotes: 2

Jesper Petersen
Jesper Petersen

Reputation: 27

to need to make

.layer {
position: fixed;
}

Upvotes: -2

Related Questions