Question

我很难将全高列放置在Bootstrap标头下方。它们可以在Chrome中工作，但不能在IE或Edge中工作（我还没有尝试过其他任何工具）。

我在这个SO答案中遵循了策略：

Twitter bootstrap 3 two columns full height

您可以在这里看到我的版本：

http://www.anthonyburns.co.uk/Examples/TestFullCols.html

IE和Edge似乎只是忽略了负的上边距。有什么想法吗？

Answer 1

div#main-container {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* margin-top: -51px; */
    /* padding-top: 51px; */
    height: 100%;
}

这在IE和Edge中有效，是因为您需要该样式的特定原因吗？

Answer 2

div#main-container {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*remove the below margin and padding styling and your page looks well in all the browsers*/
    /*margin-top: -51px;*/
    /*padding-top: 51px;*/
    height: 100%;

}

删除空白和边距，所有浏览器上的页面看起来都很好

Answer 3

原来，我还需要将 display：table 应用于标题中的.container元素。我链接到它的答案应用到所有.container项目上，我觉得这是不必要的宽泛-事实证明我错了！

Bootstrap标头下方的全高列

3 个答案: