Итак, у меня есть эта боковая панель в виде столбца в таблице с 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">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<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;
}
Любая помощь с благодарностью