固定的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，而不是固定的：

该元件根据文档的正常流动定位，然后偏移相对于它的最近的滚动祖先和含有嵌段（最接近的块级祖先），包括表相关的元素的基础上，顶部的值，右，下，离开。偏移不影响任何其他元素的位置。

来源：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>