Сопоставьте div с размером окна с помощью css или javascript

Question

У меня есть элемент, который опускается, когда я переключаю строки меню. Я могу сделать элемент сколь угодно большим или маленьким, но не могу подогнать его под экран, чтобы он не прокручивался и не отображалась страница внизу. Это сайт WordPress, и я начал с класса i fa-bars. Было невозможно анимировать отличный шрифт, поэтому я заменил его этим.

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
    <a id="mobile-nav" href="#">
        <div class="container1"
             onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
    </a>
    <script>
        function myFunction(x) {
            x.classList.toggle('change');
        }
    </script>
</div>

Это сработало, чтобы переключить меню и заставить его опускаться, но это не закрывает экран. Элемент, управляющий выпадающей областью, был слишком мал, поэтому я увеличил его, увеличив высоту, например:

@media (max-width: 768px) {
    .collapse {
        position: absolute;
        height: 775px;
        background-color: white;
        z-index: 99999 !important;
        top: 75px;
        left: -50px;
        line-height: 10px;
    }
}

Это сделало его слишком высоким, но если сделать его ниже, будет отображаться страница внизу.

Есть ли способ изменить мои существующие javascript или css, чтобы они точно соответствовали экрану, быстро реагируя, без прокрутки и без отображения страницы внизу?

Он находится в моем заголовке. php так что там будет go Я предполагаю, если есть способ изменить то, что у меня уже есть. Если нет, то как лучше всего подойти к этому?

здесь, на мобильном телефоне

Html раскрывающийся список.

<div class="module-group right">
    <div class="module left">
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul id="menu" class="menu">
                <li id="menu-item-15050"
                    class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
                    <a title="Contact" href="url">Contact
                        <ul role="menu" class="dropdow n-menu">
                        </ul>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Я пробовал применение min-height к элементу collapse max- height и 100% Ничего не получилось.

Вот ручка https://codepen.io/adsler/pen/bGVXNVM

Answer 1

Вы можете использовать position: fixed для изменения размера элемента по отношению к фрейму:

.your-selector {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Это займет все окно. Неясно, хотите ли вы, чтобы он закрыл окно во всех измерениях , но вы можете выборочно выбрать место привязки вверху / внизу / слева / справа.

Если вы тоже желая сделать тело (или, если это не тело, какой-либо другой прокручиваемый элемент) не прокручиваемым, установите стиль overflow на hidden.