问题描述
所以我把这个侧边栏作为一个带有内部div的表格中的列来垂直滚动。它在Chrome中运行得很好，但不是在Firefox中。我已经遍布网络寻找解决方案，并没有我尝试过的工作。在Firefox中忽略了100％的高度，只是把自己压低了，但我不想这样做。我想让它滚动。以下是我的
HTML：
< body>
< table class =wrapper>
< tr>
< td colspan =2class =topbar>
页面标题
< / 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 =2class =bottom>
hello
< / td>
< / tr>
< / table>
< / body>
以下是CSS：
<$ p $对象，iframe，h1，h2，h3，h4，h5，h6，p，blockquote，pre，a，abbr，首字母缩写词，地址，大，html，body，div，span，applet， 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，标签图形标题tbody tad文章旁边帆布细节嵌入图形figcaption footer标题hgroup图标标题tiff文章标题tiff文章标题tiff文章标题tib文章标题tib文章标题tgroup文章标题文章标题文章标题文章标题文章菜单，导航，输出，红宝石，节，总结，时间，标志，音频，视频{保证金：0;填充：0; border：0; font-size：100％;字体：继承; vertical-align：baseline; }
/ * HTML5显示 - 旧版浏览器的角色重置* /
文章，旁边，细节，figcaption，图，页脚，标题，hgroup，菜单，导航，部分{display：block; }
body {line-height：1; }
ol，ul {list-style：none; }
blockquote，q {引号：无; }
blockquote：before，blockquote：after，q：before，q：after {content：'';内容：无; }
table {border-collapse：collapse; border-spacing：0; }
html，body {
height：100％; / *需要容器最小高度* /
}
.wrapper {
width：100％;
身高：100％;
}
.wrapper .topbar {
background：＃000;
颜色：白色;
height：35px;
}
.wrapper #map_canvas {
background：white;
身高：100％;
宽度：100％;
}
.wrapper .sidebar {
width：400px;
/ *身高：100％; * /
背景：白色;
}
.listings {
min-height：100px;
身高：100％;
overflow-x：hidden;
overflow-y：auto;
背景：灰色;
}
.wrapper .bottom {
background：grey;
height：150px;
$ b $ p
$ b
请把style =height：0;在你想滚动的所在Div的TD中。
So I've got this sidebar as a column in a table with a div inside that scrolls vertically. It works just fine in Chrome, but not in firefox. I've looked all over the net for solutions and none of the ones I tried worked. In firefox it ignores the 100% height and just pushes itself down, but I don't want that. I want it to scroll.
Here's what I have
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>
And here's the 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;
}
Any help is greatly appreciated
please put style="height:0;" in TD of Respective Div where you want scroll.
这篇关于试图得到一个W / 100％的高度和溢出自动在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！