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

Question

我目前正在设计这个模板 -链接- 并提出了一个恼人的问题：在过去的 3 个小时里，我一直在尝试找出一种方法，让主要内容的垂直边界线达到 100% 高度但不知何故，它只是不起作用，它一直在垂直线和页脚之间产生间隙。我正在使用foundation-zurb 4框架构建它，因此它包含多个css文件，但是我试图使其尽可能简单。如果需要，您可以在此处下载文件 -链接 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;">的屏幕截图也附在此处。