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

我有一个由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>

我把

高度：100%在那里，这样你就可以看到我把它们放在哪里了

在“主要内容！”部分未超出浏览器窗口长度（未显示滚动条）的页面上，
col-sm-2
侧导航栏与主要内容区域一样为全高。但是，每当主内容区域大于浏览器窗口所能容纳的范围时，侧导航菜单都会捕捉（收缩）到其内容的大小，而不是主内容div的全高

我已经检查了何时发生这种情况，并且所有元素都具有
高度：100%收缩后，即使在inspector中也是如此。我猜它要么与引导中的列有关，要么与使用
display:table
有关，要么与两者之间的某种交互有关

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

编辑

以下是该问题的一部分：


它不会使用
和
标记保存，因此，如果要删除额外内容以查看其正常工作时的外观，则必须使用
style=“height:100%”将其添加到中。
尝试添加
最小高度：100%属性，以防止样式表收缩。
当您将高度设置为100%时，您告诉元素要做的是占据父元素中可用高度的100%。由于所有元素都具有高度：100%，因此每个元素将仅占用其中内容显示所需的100%空间，因此高度将变为内容驱动而不是容器驱动

因此，您可能想要尝试的是为父元素指定一个设置的高度，以用于驱动其子元素的容器高度。在您的情况下，我相信这就是div元素“.layout row”。您也可以始终为body元素设置一个高度，然后为所有子元素设置百分比高度，以便页面响应。大概是这样的：

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

或

顺便问一下，既然您使用的是引导列，为什么不也使用引导行呢？您只需将类“layout row”替换为“row”，这是一个引导类。同时使用row和column类意味着文档将响应网格，这意味着您不需要在CSS中强制使用display:table。您可以看到引导CSS的一个很好的解释

希望有帮助
 不掷骰子，还是这样。如果你想看的话，我在本期的引导部分进行了编辑。但是当我看
元素时，它的高度是浏览器的全高，就像
和
class='layout-row'
一样。一直到
col-sm-2
，它的父级高度是全屏的，并且它自己的高度设置为100%，但是它没有填充父级高度。@Tevis-当你说“高度是浏览器的全高度”时，这是什么意思？高度属性是否为100%？如果不为父元素设置固定高度，100%或自动高度将由内容驱动。
body {
    height: 100vh; /* vh = viewport height, which is the height of your screen */
} 

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