Создание дочернего div в процентах в высоте бабушки и дедушки с использованием jquery

Question

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

grandparent 
    parent 
     child 

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

Answer 1

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

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

В противном случае, с JQuery, если вы хотите, чтобы ребенок 25% высота прародителей:

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

Есть еще на ваш вопрос, чем это?

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

#child { 
    height: 25vh; 
} 

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

Answer 2

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

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