Question

我有一个看似奇怪的CSS问题，似乎只出现在Chrome和Firefox中（IE11正在播放）。

设计需要侧边栏和主要内容。如果内容向下滚动，侧边栏必须始终是屏幕的100％，但也会随内容一起扩展。该网站使用bootstrap 3。

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

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

我正在使用：

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;
}

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

Answer 1

试试这个！

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

100％高度不适用于Firefox或Chrome

1 个答案: