如何在不修改父 CSS 的情況下將 HTML 元素擴展到父元素的大小？

Question

我想調整覆蓋元素的大小以填充可滾動的父元素，而不更改父元素的屬性，如顯示或位置。

    #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/

這類似於如何將一個 div 覆蓋在另一個 div 上

除了我想在不更改父/包含 CSS 的情況下實現這一點。

Answer 1

我真的不明白你的目標是什么，但嘗試添加 position:relative 到你的 #scrollable。 這是子 div 具有 position: absolute 啟用的唯一情況。

Answer 2

我不認為那是可能的。 你需要給父位置：相對並給覆蓋頂部：0，左：0，右：和底部：0 這里是一個示例

#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;
    }

更新：我認為您需要將所有內容都包裝在一個 div 元素中。

<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>

和這個風格

.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;
 
}