在CSS中使用剩余空间

-1

我试图设置一个由两个主要区域组成的网站：导航和内容。导航部分需要占用左列的整个高度。主要内容将在左栏。在试图对此进行设置，我使用了下面的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>

我创建了一个拨弄完整的例子here。我在导航栏中要做的事情有三件事：显示标题，使标签与屏幕底部对齐，并让标签内容占据剩余空间。不幸的是，我没有太多的运气让这个工作。具体来说，我在获取标签内容以填充剩余空间和与屏幕底部对齐的标签时遇到问题。

非常感谢您的帮助！

来源

2014-02-28 user3284007

为了将来的参考，您应该尝试提及您正在使用外部网格系统。我花了几分钟才知道发生了什么，为什么有那么多的课程。没什么大不了的，虽然:-)

我觉得这个新的小提琴应该是非常接近你所谈论的，但什么： theFiddle

我首先要定身和HTML的高度100％，以便他们的孩子也可以100％。然后，我将navDiv放在左边，并将其宽度设为25％。您可以根据需要调整该宽度。

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

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

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

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

正如一边，这是一个我最喜欢的资源刷新CSS布局。以为你可能会发现它有帮助： http://learnlayout.com/

来源

2014-02-28 02:00:08 developering

在CSS中使用剩余空间

回答

相关问题