2016-02-16 6 views
2

Я пытаюсь динамически изменять размер части веб-страницы, но раздел только увеличивался, даже когда высота окна была уменьшена. Таким образом, я вошел в высоту и получил что-то странное.

Это функция, которая должна изменить размер (идея в том, что каждый из трех части этого класса должна занимать весь экран, заставляя пользователя для прокрутки вниз, чтобы добраться до следующего):

function set_section_min_height(){ 
    var newHeight = jQuery(window).height(); 
    console.log("Window: " + newHeight); 
    console.log("Section: " + jQuery(".pgsc_frontpage_section").height()); 
    if(newHeight > jQuery(".pgsc_frontpage_section").height()){ 
     jQuery(".pgsc_frontpage_section").height(newHeight); 
    } 
} 

функция вызывается, когда документ будет готов и на каждый размер:

jQuery(document).ready(function(){set_section_min_height()}); 
jQuery(window).resize(function(){set_section_min_height()}); 

Это мой журнал после того, как восстанавливающего высота окна

Window: 972 
Section: 150 
Window: 3356 
Section: 972 
Window: 10508 
Section: 3356 
Window: 31964 
Section: 10508 
Window: 96332 
... 

Это продолжается до тех пор, пока я получаю:

Window: 33554431 
Section: 33554428 
+1

Как называется функция set_section_min_height()? – r4phG

+0

Я отредактировал вопрос, чтобы добавить вызовы – frollo

+0

Ну, когда вы устанавливаете высоту, не повлияет ли это на контент, увеличивая высоту окна? – epascarello

ответ

6

На основе описанного вами варианта использования вам, вероятно, не нужен (или не нужен) jQuery. Блок CSS vh послужит вам хорошо.

.pgsc_frontpage_section { 
    height: 100vh; 
} 

Это установит высоту div на всю высоту экрана.

+0

И что произойдет, если содержимое раздела больше? Я хочу быть уверен, что ничего не потеряю. – frollo

+2

@frollo В этом случае вы можете установить 'min-height: 100vh;' – Harangue

1

Вы устанавливаете высоту секции быть высота окна. Делая это, увеличиваются как секция, так и окно. Повторяя это, он всегда растет.

Если вы хотите использовать полный размер использования окна CSS:

height: 100%; 
width: 100%; 

Или:

position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 

Если вы хотите только использование высота:

height: 100%; 

Или :

position: absolute; 
top: 0; 
bottom: 0; 
-2

Да. И почему вы ожидаете, что он не вырастет?

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

+0

Это комментарий, а не ответ. – Blazemonger

+0

@Blazemonger, это ответ. – Qwertiy

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