将固定div的宽度设置为等于父级宽度的宽度（声明为百分比） [英] set width of fixed div equal to that of parent width (which is declared as percentage)

问题描述

我想要一个位置的宽度：固定 div（因为我希望它能够独立于页面滚动）等于其父元素的宽度（a td 元素。）

I want to have the width of a position: fixed div (because I want it to be able independently of page scrolling) equal to the width of its parent ( a td element ).

但是我似乎无法实现。我当前的代码是：

However I cannot seem to achieve that. My current code is:

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

因此，黑色小方框应与绿色<$ c $一样宽c> td 元素。

So the little black box should be as wide as the green td element.

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

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

a 位置：粘性位置不能正确工作（宽度正确），但是由于顶部包装div的层数更多，因此它不会保持粘性，并且由于浏览器兼容性欠佳也不理想。

a position: sticky position doesn't properly work (the width is correct) but it doesn't stay sticky due to more layers of wrapping divs on top and it's not also desirable due to lackluster browser compatibility.

推荐答案

您可以通过将 fixed 替换为 sticky ，但如果表是您唯一的元素，它会完美地工作，因为 sticky 位置不会使该元素固定在其包含的块（父元素）之外

You can have what you want by replacing fixed with sticky but it will work perfectly in case the table is your only element as sticky position will not make the element to be fixed outside his containing block (parent element)

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>

这篇关于将固定div的宽度设置为等于父级宽度的宽度（声明为百分比）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！