嘗試獲取高度為100％的div並自動溢出以在Firefox中工作
[英]Trying to get a div w/ 100% height and overflow auto to work in Firefox
問題描述
因此，我已將此邊欄作為表格的一列，其中的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;
}
任何幫助是極大的贊賞
2 個解決方案
解決方案1
6 2013-04-09 04:02:27
請輸入style =“ height：0;” 在您要滾動的相應Div的TD中。
解決方案2
0 2011-10-24 16:59:02
我敢打賭這是由於桌子。 使用表格來整頁整整很久沒有使用過，不建議使用，這在語義上是錯誤的。
嘗試將帶有float:left屬性的div彼此相鄰float:left 。
Chrome和Firefox中div高度為100％的溢流看起來有所不同
[英]Overflow with div height 100% looks different in Chrome and Firefox
jQuery / CSS：即使自動溢出也可以調整100％的div高度
[英]Jquery/CSS: 100% height div resizes even though overflow is auto
溢出適用於外部 100% 高度 div，但不適用於內部 100% 高度 div
[英]Overflow works on outer 100% height div but not inner 100% height div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.