试图让一个具有 100% 高度的 div 和溢出自动在 Firefox 中工作答案

【问题标题】：Trying to get a div w/ 100% height and overflow auto to work in Firefox试图让一个具有 100% 高度的 div 和溢出自动在 Firefox 中工作
【发布时间】：2013-04-09 12:02:27
【问题描述】：

所以我把这个侧边栏作为表格中的一列，里面有一个垂直滚动的 div。它在 Chrome 中工作得很好，但在 Firefox 中却不行。我已经在网上寻找解决方案，但我尝试过的都没有。在 Firefox 中，它忽略了 100% 的高度，只是将自己向下推，但我不希望这样。我希望它滚动。

这就是我所拥有的

HTML：

<body>
        <table class="wrapper">
            <tr>
                <td colspan="2" class="topbar">
                    Page title
                </td>
            </tr>
            <tr>
                <td class="sidebar">
                    <div class="listings">
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                        &nbsp;<br>
                    </div>
                </td>
                <td><div id="map_canvas"></div></td>
            </tr>
            <tr>
                <td colspan="2" class="bottom">
                    hello
                </td>
            </tr>
        </table>
    </body>

这是 CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html, body {
    height:100%; /* needed for container min-height */
}

.wrapper {
    width: 100%;
    height: 100%; 
}

.wrapper .topbar {
    background: #000;
    color: white;
    height: 35px;
}

.wrapper #map_canvas {
    background: white;
    height: 100%;
    width: 100%;
}

.wrapper .sidebar {
    width: 400px;
    /*height: 100%;*/
    background: white;
}

.listings {
    min-height: 100px;
    height: 100%;
    overflow-x: hidden; 
    overflow-y: auto;
    background: grey;
}

.wrapper .bottom {
    background: grey;
    height: 150px;
}

非常感谢任何帮助

【问题讨论】：

哦，我正在使用这个文档类型：
您找到解决此问题的方法了吗？我遇到了同样的问题。

标签： html css firefox

【解决方案1】：

请输入 style="height:0;"在要滚动的各个 div 的 TD 中。

【讨论】：

O.o. . .这个答案应该有 180 亿票。 Stack Overflow 上的问题太多了，以至于这个问题重复了，这是唯一一个让我大吃一惊的答案。

【解决方案2】：

我敢打赌这是由于桌子。使用表格来塑造整个页面已经很久没有使用了，不鼓励使用，它在语义上是错误的。

尝试将您的 div 与 float:left 属性并排放置。

【讨论】：

感谢您的提示，但我使用表格来保持列中的高度一致。使用表格可以解决我遇到的另一个问题。如果可能的话，我宁愿保留这张桌子。