垂直边框100％高度不起作用。为什么？

Question

我目前正在设计此模板 - link - 并提出了一个恼人的问题： 在过去的3个小时里，我一直在尝试找出一种方法，让主要内容的垂直边界线达到100％的高度，但不知何故它只是不起作用而且它在垂直线之间保持不变和页脚。 我正在使用foundation-zurb 4框架构建它，因此它包含多个css文件，但我试图让它尽可能简单。如果需要，您可以在此处下载文件 - link 2。 我希望这不是太多问...

提前致谢;）

Answer 1

使用此选项将主容器高度设置为等于父高度（行div高度） 最好在你的页脚中的某些地方使用它：

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

<强>更新
当我检查你的网站时，你需要在小窗口大小上删除这个边框，所以将它添加到你的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;">中，结果的屏幕截图也会附在此处。