Высота ребенка по всю высоту скролла родителя + абсолютный блок

Рейтинг: 0Ответов: 1Опубликовано: 23.05.2023

Если внутри скролла есть элемент с абсолютной позиций (.absolute), он расширяет высоту скролла переполненного родителя (.overflow), но контент (.content) при этом не расширяется, как сделать что-бы контент (.content) занимал всю высоту?

То есть серый блок должен полностью закрывать красное пространство под ним, которое появляется из-за синего блока:

.overflow {
  overflow: auto;
  height: 100px;
  border: 1px solid black;
  background: red
}

.content {
  background: gray;
  padding: 10px;
}

.absolute-wrapper {
  position: relative;
}

.absolute {
  position: absolute;
  left: 20px;
  width: 50px;
  height: 110px;
  background: blue;
}
<div class="overflow">
  <div class="content">
  
    <span>a<br>a<br>a</span>
    
     <div class="absolute-wrapper">
       <div class="absolute"></div>
     </div>
    
    <span>b<br>b<br>b</span>
    
  </div>
</div>

http://jsfiddle.net/tp47cnm9/23/

css html прокрутка
Источник: Stack Overflow на русском

Ответы

▲ 2

Без JS мне кажется не обойтись.

Высчитываем высоту скролла .content, учитывая при этом padding

let content = document.querySelector('.content'),
      contentPaddingTop = parseInt(window.getComputedStyle(content, null).getPropertyValue('padding-top')),
      contentPaddingBottom = parseInt(window.getComputedStyle(content, null).getPropertyValue('padding-bottom'));

      content.style.height = (content.scrollHeight - contentPaddingTop - contentPaddingBottom)  + 'px';
.overflow {
  overflow: auto;
  height: 100px;
  border: 1px solid black;
  background: red
}

.content {
  position: relative;
  background: gray;
  padding: 10px;

}
.absolute-wrapper {
  position: relative;
}

.absolute {
  position: absolute;
  left: 20px;
  width: 50px;
  height: 110px;
  background: blue;
}
<div class="overflow">

      <div class="content">

        <span>a<br>a<br>a</span>

         <div class="absolute-wrapper">
           <div class="absolute"></div>
         </div>

        <span>b<br>b<br>b</span>

      </div>


  </div>