Авто Изменение размера высоты и ширины веб-приложения

Question

Я занимаюсь разработкой веб-приложения и хочу автоматически изменить размеры трех столбцов div, заполненных фоновым изображением, чтобы они заполняли всю страницу всякий раз, когда я увеличиваю или уменьшаю масштаб с помощью ctrl- и + точно так же, как jsfiddle .net , вот что я написал, чтобы сделать этот эффект, но это не удалось:

HTML:

<div id="three_columns_container">
     <div id="first-column">...</div>
     <div id="second-column">...</div>
     <div id="third-column">...</div>
</div>

CSS:

#first-column{
    background:('slice.png');
    width: 15%;
    height: 97%;
}
#second-column{
    background:('slice.png');
    width: 15%;
    height: 97%;
}
#third-column{
    background:('slice.png');
    width: 70%;
    height: 97%;
}

JS:

 $(window).resize(function(){
      $("#three_columns_container").height() = $(window).height * 0.97;
      $("#three_columns_container").width() = $(window).width* 0.97;
    });

эта ссылка может помочь решить проблему, но не дает точного эффекта ссылка

Мне было интересно, может ли кто-нибудь помочь мне с этим

Answer 1

Я думаю, что это решение вашей проблемы:

CSS

#firstColumn {
    width: 15%;
    height: 150px;
    background: #1e3340;
    float: left;
}
#secondColumn {
    width: 70%;
    height: 150px;
    background: #305a5e;
    float: left;    
}
#thirdColumn {
    width: 15%;
    height: 150px;
    background: #323e45;
    float: left;    
}

HTML

<div id="three_columns_container">
     <div id="firstColumn">...</div>
     <div id="secondColumn">...</div>
     <div id="thirdColumn">...</div>
</div>

JS

$(document).ready(function () {
    var divRatio = {};
    setRatio('firstColumn');
    setRatio('secondColumn');
    setRatio('thirdColumn');
    $(window).resize(function () {
        fixHeight('firstColumn');
        fixHeight('secondColumn');
        fixHeight('thirdColumn');
    });
    function setRatio(container) {
        var selector = '#' + container;
        divRatio[container] = $(selector).height() / $(selector).width();
    }
    function fixHeight(container) {
        var selector = '#' + container,
            ratio = divRatio[container],
            height = ratio * $(selector).width();
        $(selector).height(height);     
    }
});

Answer 2

для переменной ширины используйте% age.и для фиксированного использования пикселей.что еще ты не понимаешь?если вам нужно, чтобы фоновое изображение также было изменено, вам нужно написать js для этого.