Динамическое изменение размера div на основе размера окна браузера

Я пытаюсь выяснить, как получить динамическое изменение div, основанное на размере окна браузера. Я создал jsbin, которая иллюстрирует мою проблему, здесь: http://jsbin.com/uxomul Динамическое изменение размера div на основе размера окна браузера

То, что я хочу сделать, это изменить размер DIV, который содержит изображения, так что ДИВЫ всегда заполняет то, что осталось от высоты окна браузера (кроме 25px margin внизу, который установлен на корпусе).

Вот демо, что может быть показано, что я хочу, чтобы более четко достичь: http://emilolsson.com/shop/demo/layers

Любые идеи, что было бы лучше всего подойти к этому?

источник

2012-01-03 INT

Вы можете сделать что-то вроде этого:

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 это просто номер пробы, например, ваш запас (Вы можете получить это динамически тоже)

Вы также можете поместить его в функцию и вызвать это на обеих нагрузках страницы и при изменении размера

источник

2012-01-03 19:30:20 Andre

отлично работает, не думаю, что это будет так просто, спасибо! Изменить: теперь понял, что мне нужно использовать -120 вместо -25, почему? http://jsbin.com/afokor – INT

Возможно, есть другие вещи, которые вы не учли, например, границы, paddings, поля кузова и т. д. Если вы знаете все необходимые элементы, вы можете использовать 'jQuery (элемент) .outerWidth (true) 'на каждом – Andre

Ширина настройки через $ (элемент) .attr ('width', 100) будет устанавливать значение ширины, но не изменять размер элемента при вызове. Стоит упомянуть. Вы также можете использовать $ ('element'). Css ('width', '100px') , который изменяет размер элемента при вызове. – NuclearPeon

Вы можете попытаться привязать к событию изменения размера окна браузера.

Например:

window.onresize = function() { 
//your code 
}

источник

2012-01-03 19:25:11 scripto

Используйте положение CSS: абсолютное/относительное в сочетании с CSS сверху/снизу/слева/справа. Пример:

<!doctype html> 
<html> 
    <head> 
     <style> 
      html, body { margin:0; padding:0; width:100%; height:100%; } 

      #head   { width:100%; height:100px; background:black; color:white; } 
      #head > h1 { margin:0; } 

      #body   { position:absolute; width:100%; top:100px; bottom:25px; background:red; } 
      #body > div { position:absolute !important; } 
      #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; } 
      #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; } 
      #body-content > img { margin:25px; width:500px; vertical-align:middle; } 
     </style> 
    </head> 

    <body> 

     <!-- Head --> 
     <div id="head"> 
      <h1>Header</h1> 
     </div> 

     <!-- Body --> 
     <div id="body"> 

      <!-- Sidebar --> 
      <div id="body-sidebar"> 
       <h2>Sidebar</h2> 
      </div> 

      <!-- Content --> 
      <div id="body-content"> 
       <h2>Content</h2> 
       <img src="http://dl.dropbox.com/u/3618143/image1.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image2.jpg" /> 
       <img src="http://dl.dropbox.com/u/3618143/image3.jpg" /> 
      </div> 

     </div> 

    </body> 
</html>

источник

2012-01-03 20:54:42

Хм, я пробовал это как локально, так и на jsbin (не то, чтобы это имело какое-либо значение), но похоже, что это не работает? http://jsbin.com/oxeqok – INT

Он работает для меня локально под Chrome, FF, IE 7+, Safari и Opera. В этом примере показаны три раздела: «Голова», «Боковая панель» и «Контент». Как боковая панель, так и контент заполняют страницу горизонтально (минус 25px нижнее поле). Голова высотой 100px, боковая панель шириной 200px. Контент заполняет оставшуюся область и имеет полосы прокрутки для простоты, хотя вместо этого можно реализовать пользовательские эффекты прокрутки в виде слайд-шоу (например, в вашем примере). Что ты видишь? –

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

Если высота экрана изменилось время выполнения

Put это в CSS листе:

#FitScreenHeight 
{ 
    position:fixed 
    height:100% 
}

источник

2015-11-02 11:36:39 Tarek

Я не уверен, что это работает повсеместно. , , –

Динамическое изменение размера div на основе размера окна браузера

ответ

Смежные вопросы