垂直边框 100% 高度不起作用。为什么？ [关闭]答案

【问题标题】：Vertical border 100% height not working. Why? [closed]垂直边框 100% 高度不起作用。为什么？ [关闭]
【发布时间】：2013-06-11 19:49:42
【问题描述】：

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

提前致谢 ;)

【问题讨论】：

你指的是档案左侧的行，但它并没有结束与页脚相遇，对吧！？
好的...耐心点，我会努力解决的。
非常感谢非常感谢！
@user1628193 它可以用 css 解决，但您需要以某种方式更改您的代码并使用 display:inline-table 表示 row DIV 和 display:inline-block 用于类 large-9 的 DIV。还有一些变化。但正如我在回答中所说的那样，最好使用简单的 jQuery 来解决这个问题

标签： html css height border zurb-foundation

【解决方案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;
    }
}

【讨论】：

成功了！哇太棒了！太感谢了！！还有一件事 - 在手机或平板电脑上查看页面时是否可以禁用此功能？谢谢！
@user1628193 是的！我将更新我的答案以支持这一点。看看
好东西。刚刚检查并工作正常。再次非常感谢！

【解决方案2】：

我想你想要屏幕截图中显示的那个。实际上<div class="large-9 columns container right-border"> 有右边框，这会导致边框与内容一起结束。去掉右边框，将左边框添加到下面的div <div class="large-3 columns sidebar" style="border-left: 1px solid #dedede;"> 这里也附上result的截图。

【讨论】：

嗨。谢谢，但是当主要内容包含另一篇文章时，我一直遇到同样的问题......