使用CSS的剩余空间

我试图建立一个网站，其中包括两个主要领域：导航和内容。导航部分需要占据左栏的全部高度。主要内容将在左栏中。为了进行设置，我使用了以下CSS：

<div class="full-height row">
  <div id="navDiv" class="four wide column full-height" style="background-color:#40546C;">
    <!-- Nav COntent goes here -->
  </div>

  <div class="eight wide column">
      Main Content
  </div>    
</div>

主要内容

我已经创建了一个完整的例子小提琴。在nav列中，我尝试做三件事：显示标题，使选项卡与屏幕底部对齐，并使选项卡内容占据剩余空间。不幸的是，我没有太多的运气让这个工作。具体来说，我在让选项卡内容填满剩余空间和使选项卡与屏幕底部对齐方面遇到了问题

---

非常感谢你的帮助

作为将来的参考，您应该尽量提及您使用的是外部电网系统。我花了几分钟才意识到发生了什么，以及为什么有这么多关于事物的课程。不过没什么大不了的：-）

不过，我认为这把新小提琴应该和你所说的非常接近：

我首先必须将身体的高度和html设置为100%，这样他们的孩子也可以是100%。然后，我将导航div向左浮动，并将其宽度设置为25%。您可以根据需要调整该宽度

#navDiv {
width: 25%;
float: left;
position:relative;
}

然后，我使用绝对定位在底部获取选项卡，并在选项卡上方获取选项卡内容

我在几个地方添加了新类，以避免与网格库发生冲突。我还必须使用一个重要参数来覆盖segment类上的边距，因为我不想删除网格中使用的任何内容

可能有一种方法可以更有效地使用该网格来创建此布局。正如我所说，我不熟悉它，所以我只使用了纯CSS

顺便说一句，这是我最喜欢的一个学习CSS布局的资源。我想你可能会觉得这很有帮助：