set width of fixed div equal to that of parent width (which is declared as percentage)

问题

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

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

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

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.

回答1:

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>

回答2:

Use position: sticky instead of fixed:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

Source: MDN

See demo below:

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

来源：https://stackoverflow.com/questions/54518584/set-width-of-fixed-div-equal-to-that-of-parent-width-which-is-declared-as-perce

标签

html

css

width

css-position

sticky