0

есть блок

    <div class="block_menu" id="fixed">           
        <table ">
        <tr><td >Data</td></tr>
        <tr><td>Favourites</td></tr>            
        <tr><td >Exit</td></tr>                
        </table>       
    </div>

как можно подстроить этот блок на всю высоту экрана. Пробовал так, но я так понимаю дело не в изменении стиля

window.addEventListener('onload',function(){
    changeWindow = document.body.clientHeight;
    document.getElementById('fixed').style.height = changeWindow;
},false);
4
  • Блок на всю высоту экрана можно сделать с помощью css. Зачем это делать с помощью js?
    – Cladoxylon
    25 дек 2015 в 10:11
  • на css поменять получилось, но там проблема в том, что этот самый блок "прилипает" и по скроллу вниз , если добавлять контент , остается фиксированным
    – ddeadlink
    25 дек 2015 в 10:12
  • А так в самом скрипте ошибка, style.height должно быть в "px"
    – Cladoxylon
    25 дек 2015 в 10:13
  • подождите, но что если сделать абсолютный блок во всю ширину экрана, он не прилипнет как position:fixed.
    – Telion
    25 дек 2015 в 10:28

1 ответ 1

1

Вариант с jQuery:

function setHeight() {
    $('.block_menu').css({
        height: $(window).height() + 'px'
    });
}
setHeight(); // при загрузке окна
$(window).resize( setHeight ); // при изменении размеров окна

Можно через CSS (не очень универсальный вариант):

height: 100vh;

В вашем случае через JS надо указать единицы измерения высоты, т.к. в переменной у вас просто число:

document.getElementById('fixed').style.height = window.innerHeight + 'px';
5
  • спасибо за вариант, но хотелось бы разобраться на js
    – ddeadlink
    25 дек 2015 в 10:20
  • дополнил ответ для вашего варианта через js
    – lexxl
    25 дек 2015 в 10:20
  • я думал, что тут как раз px нужно указывать в стиле, но Ваш вариант увы не работает
    – ddeadlink
    25 дек 2015 в 10:24
  • тогда попробуйте так: window.onload = function() { document.getElementById('fixed').style.height = window.innerHeight + 'px'; }; - вот пример codepen.io/lexxl/pen/dGpVyN
    – lexxl
    25 дек 2015 в 10:35
  • ну или рабочий вариант конкретно вашего кода: window.addEventListener('load',function(){ changeWindow = window.innerHeight; document.getElementById('fixed').style.height = changeWindow + 'px'; },false);
    – lexxl
    25 дек 2015 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.