2015-06-15 4 views
1

У меня есть 4 основных раздела на моем сайте. Каждый из них имеет ширину и высоту установки до 100% с помощьюАвто высота элемента

width:100%; 
    height:100%; 
    position:relative; 

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

overflow:auto 

который не работал. Есть ли способ сделать высоту содержимого 100%, но пусть он автоматически отрегулирует свою высоту после этого?

Я даже пытался использовать

height:auto 

, но результат был, что третий раздел полностью исчезли.

+0

Можете ли вы пояснить, что вы подразумеваете под «Есть ли способ сделать высоту содержимого 100%, но пусть он автоматически отрегулирует свою высоту после». Непонятно, какое поведение вы пытаетесь выполнить ... – Brian

+0

что я пытаюсь использовать acomplis, чтобы мой div автоматически менял его высоту, когда содержимое внутри слишком велико для него, но всякий раз, когда я устанавливал высоту: автоматически, он полностью ива. – Darlyn

+2

Высота 100% должна автомасштабировать ... вы должны опубликовать jsfiddle, проблема, которую вы видите, действительно неясно от чтения этого. – Brian

ответ

-2

Вы должны установить на высоте пикселя, по меньшей мере, один, как style="width: 1200px;"

Если вы хотите dynamicaly настроить размер сайта, попробуйте его с помощью яваскрипта функции.

How to get height and width after window resize

http://www.w3schools.com/jsref/event_onresize.asp

Надеется, что это помогает.

PS: Я тоже нуб. Если я ошибаюсь, пожалуйста, поправьте меня.

Редактировать: Вы пробовали это с помощью функции Javascript, которая запускается window.resizeEvent? (ResizeEvent добавляется к телу, как <body onresize="resize()"></body>

Я только что получил пример с JQuery, но это будет выглядеть так:

<script> 
    function resize() { 
     $("#div_container_to_resize").css("height:", (window.innerHeight) + "px"); 
    } 
</script> 

Чистый Javascript решение будет выглядеть следующим образом:

<script> 
    window.addEventListener('resize', resize); 
    function resize() { 
     document.getElementById("div_container_to_resize").setAttribute("height:", window.innerHeight + "px"); 
    } 
</script> 

Для более информация и подробная информация см. в размещенных ссылках.

+0

это две разные ссылки! http://stackoverflow.com/questions/12596299/how-to-get-height-and-width-after-window-resize http://www.w3schools.com/cssref/pr_class_display.asp – Ore

+0

Хотя это теоретически может ответить на вопрос, [было бы предпочтительнее] (// meta.stackoverflow.com/q/8259) включить сюда основные части ответа и предоставить ссылку для справки. –

0

Попробуйте установить разделители на:

min-height: 100%; 
min-width: 100%; 

Это гарантирует, что элементы не станут меньше 100% высоты и ширины, но также позволят расширить.

+0

Я пробовал это, но не работал – Darlyn

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