将固定 div 的宽度设置为等于父宽度的宽度（声明为百分比）

Question

我想让position: fixed div 的宽度（因为我希望它能够独立于页面滚动）等于其父级（td 元素）的宽度。

但是我似乎无法做到这一点。我当前的代码是：

html:

<table style="width: 90%; border: 1px solid black;">
<tr>
  <td id='tdLeft'>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>

  </td>
  <td id='tdRight'>
    fdsfsd
    <br>
    rfeoif jerofj eriof
    <div id='divFixed'>
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfaaasd, fdfsdss, 
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd, 
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd
    </div>
  </td>
</tr>
</table>

css:

#tdLeft, #tdRight {
    margin: 0;
    padding: 0;
    border-spacing: 0px;
    border-collapse: collapse;
    vertical-align: top;
}
#tdLeft {
  position: relative;
  width: 40%;
}
#tdRight {
  position: relative;
  width: 60%;
  background-color: green; 
}
#divFixed {
    position: fixed;
    border: 1px solid black;
    top: 100px;
    width: inherit;
}

所以小黑盒子应该和绿色的td元素一样宽。

jsfiddle：https://jsfiddle.net/jpovqd4u/2/

position: sticky 位置无法正常工作（宽度正确），但由于顶部有更多的 div 包装层，它不会保持粘性，而且由于浏览器兼容性不佳，它也不可取。

Answer 1

您可以通过将fixed 替换为sticky 来获得您想要的东西，但是如果表格是您唯一的元素，它将完美地工作，因为sticky 的位置不会使元素被固定在他的包含块之外（父元素）

table {
  border: 1px solid black;
  width: 90%;
}

#tdLeft,
#tdRight {
  margin: 0;
  padding: 0;
  border-spacing: 0px;
  border-collapse: collapse;
  vertical-align: top;
}

#tdLeft {
  position: relative;
  width: 50%;
}

#tdRight {
  position: relative;
  width: 50%;
  background-color: green;
}

#divFixed {
  position: sticky;
  border: 1px solid black;
  top: 100px;
}

<table>
  <tr>
    <td id="tdLeft">
      fdsfsdfsd<br><br><br><br><br><br><br><br><br>
      fdsfsdfsd<br><br><br><br><br><br><br><br><br>
      fdsfsdfsd<br><br><br><br><br><br><br><br><br>
      fdsfsdfsd<br><br><br><br><br><br><br><br><br>
      fdsfsdfsd<br><br><br><br><br><br><br><br><br>
    </td>
    <td id="tdRight">
      fdsfsd
      <br>
      rfeoif jerofj eriof
      <div id="divFixed">
        hahaha, fdsfsd, fsdfsd, fdsfds, fdsfaaasd, fdfsdss, 
        hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd, 
        hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd
      </div>
    </td>
  </tr>
</table>

Answer 2

使用position: sticky 代替固定：

元素按照正常流程定位 文档，然后相对于其最近的滚动祖先偏移 和包含块（最近的块级祖先），包括 与表格相关的元素，基于 top、right、bottom 和 左边。偏移量不会影响任何其他元素的位置。

来源：MDN

请看下面的演示：

#tdLeft, #tdRight {
	margin: 0;
	padding: 0;
	border-spacing: 0px;
	border-collapse: collapse;
	vertical-align: top;
}
#tdLeft {
  position: relative;
  width: 50%;
}
#tdRight {
  position: relative;
  width: 50%;
  background-color: green; 
}
#divFixed {
	position: sticky; /* CHANGED */
	border: 1px solid black;
	top: 100px;
	/*width: inherit;*/
}

<table style="width: 90%; border: 1px solid black;">
<tr>
  <td id='tdLeft'>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  fdsfsdfsd<br><br><br><br><br><br><br><br><br>
  
  </td>
  <td id='tdRight'>
    fdsfsd
    <br>
    rfeoif jerofj eriof
    <div id='divFixed'>
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfaaasd, fdfsdss, 
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd, 
      hahaha, fdsfsd, fsdfsd, fdsfds, fdsfsd, fdfsd
    </div>
  </td>
</tr>
</table>