100％高度不适用于Firefox或Chrome

Question

I have an seemingly odd CSS issue that only seems to be coming up in Chrome and Firefox (IE11 is playing ball).

The design calls for a sidebar and main content. The sidebar has to always be 100% of the screen but also extend with the content, should the content scroll down. The site uses bootstrap 3.

When the content is less than a screen high, it works fine in IE and Chrome, but not FF.

When the content is more than a screen high, it seems to lose height completely in Chrome and FF.

I am using:

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

JSFiddle Fullscreen: 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;
}

Any ideas on what I'm doing wrong or where I should be looking?

Answer 1

Try this!

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