Детский div абсолютно позиционированного родителя, не занимающего всю высоту страницы

Question

У меня проблемы с ошибкой в ​​проекте, над которым я работаю.

Мобильное меню, которое я хочу взять на полную высоту окна просмотра, когда оно меньше 768 пикселей, не имеет высоты, даже если я установил его на 100%.

Он будет отображаться только при переключении с использованием значка гамбургера.

nav элемент абсолютно позиционирован и мобильное меню является последним дочерним элементом nav элемента.

nav элемент абсолютно позиционирован так, что фон является прозрачным и section под ним может быть в верхней части страницы.

Я хочу, чтобы div с классом mobile_links занимал всю высоту страницы при переключении на мобильные устройства.

У меня есть обходной путь к нему, которое должно установить position свойство section ниже nav для relative и установить top: -40px.

Мне нужно установить position элемент nav на static, а также для этого.

Однако мне это не нравится, потому что оно оставляет пространство между двумя элементами section на странице.

Есть ли способ заставить мобильное меню иметь высоту 100%, не изменяя свойства position, которые у меня есть на данный момент?

Вот ссылка на страницу я говорю: https://carifood-init.appspot.com/

Answer 1

Для устранения неполадок height: 100% проблемы, посмотрите на этот пост:

• Working with the CSS height property and percentage values

В качестве альтернативы , используйте height: 100vh.

Из спецификации:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

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

• Блок оч.сл. - равно 1% от ширины начального содержащего блока.
• vh unit - равно 1% от высоты исходного, содержащего блок.
• vmin unit - В равной степени меньше vw или vh.
• единица измерения vmax - равняется большему количеству vw или vh.

Browser Compatibility (видовые единицы имеют очень полную поддержку среди основных браузеров, кроме IE 9, 10 и 11, и Edge, не поддерживают vmax)

Answer 2

использовать JQuery для этой работы: Существует пример, который я использовал для создания высоты секции на 100% экрана (в зависимости от устройства, которое смотрит на страницу, оно будет работать более или менее, поэтому оно реагирует).

<script> 
$(document).ready(function(e) { 
    var wheight = $(window).height(); 
    $('.section').css("min-height", wheight); 
}); 
</script> 

Надеюсь, это поможет!