基础 5 - div 填充高度

Question

我正在尝试填充边栏 div，以便蓝色背景填满屏幕。 Foundation 让这有点棘手（我试过 height:100%;）

http://codepen.io/ZURBFoundation/pen/olduj

<ul class="side-nav" link="white">
<li class="active"><a href="#">

Answer 1

我可以想到三种不同的方法来实现这一目标。

• 将 parent 个元素 (body/html) 的高度设置为 100%。这样做时，您可以将 child 的高度设置为 100%。

  html, body, .side-nav { height: 100%; }
  

• 使用viewport percentage lengths。在这种情况下，您将使用 100vh.

  .side-nav { height: 100vh; }
  

• 绝对定位元素并指定一个top/bottom值为0.

  .side-nav { position: absolute; top: 0; bottom: 0; }
  

  如果这不起作用，您将不得不尝试 fixed 定位。 （值得指出的是 fixed 定位是相对于 window，而 absolute 定位是相对于最近的非 static 定位的 parent 元素。 )