установить ширину фиксированного div равной ширине родительской ширины (которая объявлена ​​в процентах) - PullRequest
Новая
       32

установить ширину фиксированного div равной ширине родительской ширины (которая объявлена ​​в процентах)

0 голосов
/ 04 февраля 2019

Я хочу, чтобы ширина элемента 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 не работает должным образом (ширина верна), но она не остается липкой из-за большего количества слоев оберточных элементов сверху иэто также нежелательно из-за слабой совместимости браузера.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Используйте position: sticky вместо fixed :

Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно ближайшего предка прокрутки и содержитblock (ближайший предок уровня блока), включая связанные с таблицей элементы, основанные на значениях top, right, bottom и left.Смещение не влияет на положение любых других элементов.

Источник: 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>
0 голосов
/ 04 февраля 2019

Вы можете получить то, что хотите, заменив 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>
...