Я использую следующий скрипт для настройки высоты контейнера div на моей странице относительно высоты окна браузера
function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
Скрипт отлично работает, чтобы увеличить высоту div #slider относительно высоты окна просмотра. Проблема в том, что если я изменил размер окна браузера, размеры внутренних элементов div будут искажены. Однако, если я обновляю браузер, внутренние элементы div фиксируют себя. Также, если я пойду в firebug, в то время как внутренний div будет искажен, и я проверю ЛЮБЫЕ, даже несвязанные элементы CSS-свойства, внутреннее div фиксирует себя.
Будет ли решение для javascript каким-то образом обновлять CSS после изменения размера браузера? Если да, то как вы это делаете? Или я должен связывать измеренные размеры элементов div с функцией для начала? Я также пытался сделать это без везения.
Тот факт, что браузер или обновление CSS, похоже, устраняет проблему, заставляет меня наклониться к первому решению, если это возможно. Благодарю.
Во-первых, я предлагаю вам сделать текстовое пространство... упрощенной версией для изучения. Вот пример jsFiddle в качестве примера того, как вы можете сделать пример, который не содержит всех других материалов сайта. CSS читается один раз. js пишет встроенный CSS. Поэтому вы не хотите обновлять CSS. Вы хотите написать новый встроенный CSS над материалом, который уже написал js.
Вот пример функции. Ниже вы узнаете, как вы назовете его на DOM, а затем, когда изменяется размер окна. Имейте в виду, что он будет запускать эту функцию много раз, пока вы изменяете размер, поэтому это не подходит для всех сценариев. Кроме того, - хотя похвально, что вы хотите изменить его размер (я делаю то же самое), никто другой не изменит размер своего браузера... Поэтому выбирайте свои битвы.
var your_functions_name = function() {
var windowHeight = $(window).height();
$('.box').css('height', windowHeight/2);
};
// run on document ready
$(document).ready(your_functions_name);
// run on window resize
$(window).resize(your_functions_name);