Заставить ребенка делиться на рост в процентах от бабушки и дедушки с помощью jquery

Question

Я хочу сделать высоту дочернего элемента в процентах от бабушки и дедушки, используя jquery.

grandparent
   parent
       child

Я хочу, чтобы у ребенка был процент роста его прародителя, чтобы он реагировал на область просмотра.

Answer 1

Если это ваш код:

<div>
  <div>
    <div class="child">
    </div>
  </div>
</div>

Вы, вероятно, можете сделать что-то вроде:

var percentValue; // Set your percent here
var grandparentHeight = $('.child').parent().parent().height();
$('.child').css({'height' : grandparentHeight * percentValue});

Answer 2

Эрик, ты не был очень конкретным.

Например, если "parent" представляет собой фиксированную процентную высоту "grandparent", тогда просто установить математическую процентную высоту дочернего элемента в CSS просто без JS.

В противном случае, с помощью jQuery, если вы хотите, чтобы child был 25% роста бабушки и дедушки:

var grandparent_height = $('#grandparent').height();
$('#child').height( grandparent_height * 0.25 );

Есть что-то еще на ваш вопрос?

Если вы хотите установить размер дочернего элемента относительно окна просмотра, и вы довольны работой только с современными браузерами, то вы можете использовать модуль vh CSS (1vh составляет 1% от высоты окна просмотра) и установить

#child {
    height: 25vh;
}

Различные браузеры могут возвращать разные результаты при измерении размера области просмотра. Вот хороший ресурс (и библиотека javascript) о различных методах работы браузера: http://verge.airve.com/)