Question

我正在尝试设置一个由两个主要区域组成的网站：导航和内容。导航部分需要占据左列的整个高度。主要内容将在左栏中。为了设置它，我使用以下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>

我用完整的例子here创造了一个小提琴。我在nav列中尝试做的是三件事：显示标题，在屏幕底部对齐标签，让标签内容占用剩余空间。不幸的是，我没有太多运气让这个工作。具体来说，我在获取标签内容以填满剩余空间并且标签与屏幕底部对齐时遇到问题。

非常感谢您的帮助！

Answer 1

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

我认为这个新的小提琴应该与你所谈论的非常接近，但是： theFiddle

我首先必须将身体的高度和html设置为100％，以便他们的孩子也可以100％。然后我将navDiv向左移动并给它宽度为25％。您可以根据需要调整该宽度。

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

然后我使用绝对定位来获取底部的标签，并获取标签上方的标签内容。

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

可能有一种方法可以更有效地使用该网格来进行此布局。正如我所说，我不熟悉它，所以我只使用简单的CSS。

顺便说一句，这是我最喜欢的用于刷新CSS Layout的资源。以为您可能会发现它有用： http://learnlayout.com/

使用剩余空间与CSS

1 个答案: