Question

我有一个由css表组成的布局，以便内容区域“填充”标题下面的空格。

内容区域还有一个侧面导航菜单。 HTML看起来像：

HTML

<div class="layout-table" style="height: 100%;">
    <div class="layout-row">
        There's a Header in here!
    </div>
    <div class="layout-row" style="height: 100%;">
        <div class="col-sm-2" style="height: 100%;">
            Side Navigation Here!
        </div>
        <div class="col-sm-10" style="height: 100%;">
            Main Content!
        </div>
    </div>
</div>

CSS

.layout-table{
    display: table;
    height: 100%;
    width: 100%;
}

.layout-row{
    display: table-row;
}
.layout-row .col-md-12{
    padding-left: 0px;
    padding-right: 0px;
}

我把height: 100%;放在那里，这样你就可以看到我拥有它们的位置。

在“主要内容”的页面上section不会超出浏览器窗口的长度（不显示滚动条），col-sm-2侧导航栏就像主要内容区域一样是全高。但是，只要主内容区域大于浏览器窗口可以容纳的范围，侧面导航菜单就会捕捉（缩小）到其内容的大小，而不是主内容div的完整高度。

我已经检查过这种情况，并且所有元素在收缩后甚至在检查器中都有height: 100%;。我猜它要么与Bootstrap中的列有关，要么使用display: table，或者两者之间可能有某些交互？

我想要发生的是侧面导航菜单应该是主要内容div的全高，即使该div大于浏览器窗口。

编辑

这是问题的重点：

http://www.bootply.com/6PbNVj71Hs#

它不会使用<html>和<body>标记进行保存，因此如果要删除额外内容以查看内容，则必须使用style="height: 100%;"添加它们看起来它正常工作。

Answer 1

尝试在样式表中添加min-height: 100%;属性，以防止缩小。

Answer 2

当你设置100％的高度时，你告诉元素要做的是占用父元素中100％的可用高度。由于所有元素的高度均为100％，因此每个元素仅占用显示内容所需空间的100％，因此高度变为内容驱动而非容器驱动。

因此，您可能想要尝试的是为您要用于驱动其子容器高度的父元素设置一个设置高度。在你的情况下，我相信这是div元素＆＃34; .layout-row＆＃34;。您也可以始终为body元素设置高度，然后您可以为所有后代元素设置百分比高度，以便您的页面具有响应性。像这样：

body {
    height: 100vh; /* vh = viewport height, which is the height of your screen */
}

或

.layout-row:nth-of-type(2) {
     height: 300px;
}

顺便说一句，既然您正在使用Bootstrap列，为什么不使用Bootstrap行呢？您所要做的就是更换类＆＃34; layout-row＆＃34;使用＆＃34; row＆＃34;，这是一个Bootstrap类。使用行和列类意味着文档将响应网格，这意味着您不需要在CSS中强制显示：table。你可以看到Bootstrap CSS here的一个很好的解释。

希望有所帮助！

当另一列超出浏览器高度时，为什么一列缩小为内容大小？

2 个答案: