2015-09-17 3 views
2

Быстрый вопрос. Я хотел бы добавить программу JS для управления высотой одного из моих ботстрапов (это декоративная рамка на обеих сторонах страницы - см. Рисунок enter image description here)Автоматический CSS Высота Div

Я не хочу устанавливать высоту вручную (т.е. 2000px;)

я что-то вроде этого пытается, но я не мог управлять его

css("max-height", $(window).height()); 

кроме этого просто заполняет экран, так или иначе наполнения тела?

Вот сайт - davidcodes.co.uk/vintarnBurmese/index.html -

Дэвид

+0

Я думаю, что '.your-ДИВ {высота: 100vh} 'в порядке. Если вы хотите отправить некоторое пространство, просто используйте '.your-div {height: calc (100vh - <количество пикселей> px}'. – Stiger

ответ

0

Заменить окно с 'телом':

$el.css('height', $('body').height()); 
+0

Я пробовал это, но не повезло, мне нужно что-то добавить к div в CSS? –

1

Если вы ориентируетесь современные браузеры , или используя modernizr, то использование единиц «vh» обычно работает лучше, чем%. Когда вы пытаетесь определить что-то относительно высоты экрана, процентные единицы требуют, чтобы высоты дерева, идущего от вашего элемента вверх через своих родителей к телу, имели предопределенные высоты. Но единицы «vh» точно фиксируют то, что вы хотите.

.yourdiv { height:100vh; }

+0

Я пробовал это сейчас, но, к сожалению, он не идет в нижней части страницы. CSS .sideBar { background-image: url ("images/landing/pattern.jpeg"); height: 100vh; background-repeat: repeat; background-size: cover; margin-top: -100px; } –

+0

верхний край перемещает его. Это _sized_ будет той же высоты, что и ваша страница, но маржа перемещается Если это боковая панель, то вы хотите, чтобы она прокручивалась вместе с остальной частью страницы? Если нет, тогда используйте положение: зафиксировано и установите верх и низ, где хотите, а t han высота. Хотя, возможно, вам придется изменить гнездование. .sideBar {position: fixed; топ: 100px; bottom: 0px; ширина: 200px; } –

+0

В настоящий момент это далеко внизу. Вот ссылка на мой сайт, где вы можете увидеть, как это выглядит http://www.davidcodes.co.uk/vintarnBurmese/index.html –

0

Это работало в конце концов (хотя Safari не нравится, FF и Chrome найти ок)

<script> 
    var mainSectionHeight = $(".mainSection").height(); 
    $(".sideBar").height(mainSectionHeight + 100 + "px"); 
</script> 
Смежные вопросы