Как изменять динамично высоту блока js

531
24 ноября 2016, 10:20

Вот есть у меня блок А который имеет position:absolute. Он вложенный в нормальный блок В с position:relative. Проблема в том что когда блок А вылазит из-за пределов блока В - он и вылазит за пределы body.

HTML

<div class="B">
  <div class="A">
     <ul>
        <li>test</li>
     </ul>
  </div>
</div>

CSS

.A {
   position:absolute;
   top:20px;
   left:3px; 
}
.B {
   position:relative;
   height:200px;
   width:300px;
}

Как добиться такого эффекта как на фейсбук который меняет высоту блока друзей когда он пытается вылезти за граници боди. По сути у них резиновый блок который меняет свою высоту что-бы не вылезти за граници

Answer 1

var outer = document.getElementsByClassName('B'), 
    inner = document.getElementsByClassName('A'); 
 
outer[0].style.height = inner[0].offsetHeight + 15 + 'px';
.A { 
  background: gold; 
  position:absolute; 
  top:20px; 
  left:5px;  
  width: 300px; 
} 
 
 
.B { 
  background: pink; 
  position:relative; 
  height:50px; 
  width:300px; 
  padding: 5px; 
}
<div class="B"> 
  <div class="A"> 
     <ul> 
        <li>test</li> 
       <li>test</li> 
       <li>test</li> 
       <li>test</li> 
       <li>test</li> 
       <li>test</li> 
     </ul> 
  </div> 
</div>

Answer 2

$(function() { 
	$(document).ready(function(){ 
    var hA = $(".A").height(); 
      $(".B").css('height', hA); 
    }); 
});
.A { 
   position:absolute; 
   top:20px; 
   left:3px;  
   
  border: 1px solid #000; 
} 
.B { 
   position:relative; 
   height:200px; 
   width:300px; 
   
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="B"> 
  <div class="A"> 
     <ul> 
        <li>test</li> 
       <li>test</li> 
       <li>test</li> 
     </ul> 
  </div> 
</div>

READ ALSO
Как сделать такую гистограмму?
CSS

Как сделать такую гистограмму?

Нужно сверстать гистограмму как на картинке. Каждый элемент должен быть анимирован, например первый от 0 до 5%, последний от 0 до 100%.

418
Растянуть li на всю ширину в ul с position: absolute
CSS

Растянуть li на всю ширину в ul с position: absolute

Имеется список. .

525
CSS li отступ от вложенности
CSS

CSS li отступ от вложенности

Как заменить данный CSS циклом, добавляющим +20px padding к каждому следующему элементу в дереве li? необходим именно padding!.

429
Убрать padding для внутреннего элемента
CSS

Убрать padding для внутреннего элемента

Если у body стоит padding: 0px 10px;, как можно убрать этот стиль у одного из внутренних элементов, а то отступы остаются, а их не должно быть - в футере,...

 618