Вертикальная рамка 100% высота не работает. Зачем?

Question

Я в настоящее время разрабатываю этот шаблон - link - и придумал раздражающую проблему: Я пытался в течение последних 3 часов выяснить, как получить вертикальную линию границы основного контента 100% высоты, но как-то он просто не работает, и он продолжает получать разрыв между вертикальной линией и нижним колонтитулом. Я строю это с фреймворком основания-zurb 4, поэтому он содержит несколько файлов css, однако я старался сделать его максимально простым. Вы можете скачать файлы здесь - link 2 - если вам нужно. Я надеюсь, что это не слишком много, чтобы спросить ...

Заранее спасибо;)

Answer 1

Используйте это, чтобы установить основную высоту контейнера, равную его родителя высота (строка высота дел).
лучше использовать это некоторые, где в футере:

<script type="text/javascript"> 
    $('document').ready(function(){ 
     var parentHeight = $('div.large-9').parent().height(); 
     $('div.large-9').height(parentHeight); 
    }); 
</script> 

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

@media screen and (max-width: 740px){ 
    .container.right-border { 
     border-right: none; 
    } 
} 

Answer 2

Я думаю, что вы хотите, чтобы один, показанный на скриншоте. Фактически <div class="large-9 columns container right-border"> имеет правую границу, которая приводит к тому, что граница заканчивается вместе с содержимым. Удалите правую границу и добавьте левую границу к следующему div <div class="large-3 columns sidebar" style="border-left: 1px solid #dedede;"> скриншот результата также прилагается здесь.