Изменение размера div в зависимости от размера экрана

Question

Изменение размера div в зависимости от размера экрана

0

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

Я хочу, чтобы флажок div заполнил все, кроме последних 50px или 100px экрана, чтобы пользователь мог видеть, что больше содержимого для прокрутки (это делается с помощью и стрелкой графически).

Это также должно произойти независимо от размера экрана на мобильном телефоне. У меня есть следующий код, который меняет размер моего содержащего div, чтобы заполнить экран и работать для всех устройств от тестирования. Мне просто нужна последняя часть, которая затем удаляет пиксели xx в bing в нижнем содержании, которое будет видно на экране.

У меня есть эти 2 фрагмента, которые отлично работают на экране

Фрагмент 1

<script type="text/javascript">
function handleResize() {
var h = jQuery(window).height();
    jQuery('.banner_slide').css({'height':h+'px'});
}
jQuery(function(){
    handleResize();
    jQuery(window).resize(function(){
    handleResize();
});
});
</script>

Фрагмент 2

<script type="text/javascript">
jQuery(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    if(windowH > wrapperH) {                            
        jQuery('.banner_slide').css({'height':(jQuery(window).height())+'px'});
    }                                                                               
jQuery(window).resize(function(){
    var windowH = jQuery(window).height();
    var wrapperH = jQuery('.banner_slide').height();
    var differenceH = windowH - wrapperH;
    var newH = wrapperH + differenceH;
    var truecontentH = jQuery('.banner_slide div').height();
    if(windowH > truecontentH) {
        jQuery('.banner_slide').css('height', (newH)+'px');
    }
    })          
});
</script>

Любая помощь будет потрясающей

user3548333 18 апр. 2014, в 11:26

Источник

0

Вы пытаетесь установить height: 100% ?
Aray 18 апр. 2014, в 09:28

Теги:

javascript

jquery

html

css

fullscreen

3 ответа

0

Почему вы не используете медиа-запросы в css вместо этого?

Затем вы можете настроить все размеры, высоту и ширину экрана в зависимости от того, каким образом вы его устанавливаете.

Например:

    @media (min-height: 500px) and (max-height: 796px){

     .banner_slide{
    height: 746px;
           }

    }

Затем вы можете настроить стиль на любой размер экрана, который вы хотите, поэтому, если размер мобильного телефона в зависимости от мобильного устройства может быть меньше. (Откорректируйте любые костюмы!)

 @media (min-height: 0px) and (max-height: 350px){

     .banner_slide{
    height: 300px;
           }

    }

T.J. Wallace 18 апр. 2014, в 07:20

0

В фрагменте 2 результирующая высота рассчитывается путем вычитания высоты баннера из высоты окна

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var differenceH = windowH - wrapperH;

вы можете выровнять высоту вашего нижнего смещения именно так?

var windowH = jQuery(window).height();
var wrapperH = jQuery('.banner_slide').height();
var bottomOffset = jQuery('.image_on_bottom_page').height;
var differenceH = windowH - wrapperH - bottomOffset;

Smi Lee 18 апр. 2014, в 07:15

Ещё вопросы

Вы пытаетесь установить height: 100% ?

T J · Accepted Answer · 2014-04-18T07-55-00.000Z

Если поддержка старого браузера не является проблемой, вы можете использовать функцию css3 calc().

set padding-right:50px для родителя, примените width: calc(100% - 50px) и абсолютно позиционируйте изображение в пространстве заполнения