CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 2824

How do I expand an HTML element to be the size off the parent without modifying parent CSS?

I want to size an overlay element to fill a scrollable parent element, without changing the parent element's attributes like display or position.


    #scrollable {
      width: 300px;
      height: 100px;
      overflow: auto;
      background-color: rgba(0, 0, 255, 0.1);
    }

    #overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 0, 0, 0.1);
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
    }

    <div id="scrollable">
      <div contenteditable=true>
        <p>Editable with parent with scrolling</p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
        <p><br></p>
      </div>
      <div id="overlay">
      </div>
    </div>

https://jsfiddle.net/3d1npx0L/

This is similar to How to overlay one div over another div

except I want to achieve this without changing the parent/contain CSS.

Upvotes: 0

Views: 175

Answers (2)

ibrahim s
ibrahim s

Reputation: 313

I don't think that's possible. you will need to give the parent position:relative and give the overlay top:0, left:0, right: and bottom:0 here is a sample

#scrollable {
      width: 300px;
      height: 100px;
      overflow: auto;
      background-color: rgba(0, 0, 255, 0.1);
      position:relative;
    }

    #overlay {
     
      background-color: rgba(255, 0, 0, 0.1);
      position: absolute;
      left: 0;
      top: 0;
      bottom:0;
      right:0;
      pointer-events: none;
    }

update: I think you need to wrap everything in a div element.

<div class="scroll-holder">

  <div id="scrollable">

    <div contenteditable=true>
      <p>Editable with parent with scrolling</p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      <p><br></p>
      
    </div>

  </div>

  <div id="overlay">
  </div>

</div>

And the styles to this

.scroll-holder {
  position: relative;
  width: 300px;
  height: 100px;
}

#scrollable {

  height: 100px;
  overflow: auto;
  background-color: rgba(0, 0, 255, 0.1);

}

#overlay {

  background-color: rgba(255, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
 
}

Upvotes: 1

Pinncik
Pinncik

Reputation: 321

I don’t really get what is your goal, but try to add position:relative to your #scrollable. It is the only case when child div will have position: absolute enabled.

Upvotes: 1

Related Questions