html - 100% 高度不适用于 Firefox 或 Chrome

Question

我有一个看似奇怪的 CSS 问题，似乎只出现在 Chrome 和 Firefox 中(IE11 正在玩球)。

设计需要侧边栏和主要内容。侧边栏必须始终是屏幕的 100%，但如果内容向下滚动，也可以随着内容延伸。该网站使用 bootstrap 3。

当内容小于屏幕高度时，它在 IE 和 Chrome 中工作正常，但在 FF 中不工作。

当内容超过一个屏幕高度时，在 Chrome 和 FF 中似乎完全失去了高度。

我正在使用:

JSFiddle:http://jsfiddle.net/eek030pu/

JSFiddle 全屏:https://jsfiddle.net/eek030pu/embedded/result/

HTML

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <nav class="navbar navbar-default">
                 <h4>Header</h4>

            </nav>
        </div>
    </div>
</div>
<div class="container full-height">
    <div class="row full-height">
        <div class="col-lg-3 full-height">
            <div id="main-menu" class="full-height">
                 <h4>Sidebar</h4>
            </div>
        </div>
        <div class="col-lg-9 content">
            <form method="post" action="" id="ctl00" autocomplete="off">
                <div>
                    <h1>Content</h1>
                    <h1>Content</h1>
                    <!-- copy paste to cause scrolling -->
               </div>
            </form>
        </div>
    </div>
</div>

CSS

html {
    position: relative;
    height: 100%;
    min-height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.full-height {
    min-height: 100%;
    height: 100%;
}
#main-menu {
    background-color: red;
}

关于我做错了什么或我应该在哪里寻找的任何想法？

Answer 1

试试这个!

.full-height {
    width: auto;
    height: auto;
    padding: 0px;
}