因此,我已經將此側邊欄作爲表格中的一列與垂直滾動的div進行比較。它在Chrome中運行得很好,但在Firefox中沒有。我已經遍佈網絡尋找解決方案,而且我沒有嘗試過那些解決方案。在Firefox中它忽略了100%的高度,只是把自己壓低了,但我不想那樣。我想讓它滾動。試圖獲得一個div/100%高度和溢出自動在Firefox中工作
這裏就是我有
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;
}
任何幫助是極大的讚賞
噢,我正在使用這種文檔類型:<!DOCTYPE HTML> –
您是否找到解決此問題的解決方案?我遇到同樣的問題。 – Phenix