HTML – 如何在Firefox和IE中使这个100%高度列溢出布局工作?
我有一个三列布局,占用浏览器的100%宽度和高度(带填充).此布局包含两列,它们也占据100%的高度,并且应该独立滚动.
这是一个jsfiddle:http://jsfiddle.net/KdZ9A/2/.以下是它在Chrome中的外观(可取 – 单个列滚动): 和Firefox和IE(不受欢迎 – 正在滚动): 这在Chrome中完美运行;但是,在Firefox和IE(10)中,整个页面滚动而不是单个列滚动.我只希望列溢出并滚动 – 而不是正文.任何想法如何在Firefox和IE中使这项工作? 我还尝试了使用列内容的绝对定位的一种不同的方法:http://jsfiddle.net/KdZ9A/3/. 这是我正在使用的HTML: <div id="container"> <div id="inner"> <div id="palette">palette</div> <div id="list"> <div class="content"></div> </div> <div id="editor"> <div class="content"></div> </div> </div> </div> 我使用绝对定位来达到100%的高度,然后在里面显示表格和表格单元格,以达到100%的高度: * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } body { position: relative; } #container { background-color: #f1f1f1; position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px; } #inner { display: table; height: 100%; } #inner > div { display: table-cell; } #palette { min-width: 180px; max-width: 180px; width: 180px !important; background-color: pink; } #list { width: 55%; min-width: 350px; background-color: cyan; } #editor { width: 45%; min-width: 400px; background-color: magenta; } .content { overflow: auto; height: 100%; } 解决方法
我放弃和HOLY CRAP的时间是5分钟……我工作得很好
http://jsfiddle.net/gFX5E/15/ 这是基于我提到的不同方法.我需要包装.content div并使包装器相对位置.我还在列中添加了一些标题. HTML: <div class="content-wrap"> <div class="content"> ... </div> </div> CSS: .content-wrap { position: relative; height: 100%; } .content { overflow: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } 似乎可以在Chrome,Safari,Firefox和IE8中使用. 这里是一个更加语义化的HTML5版本,它还在顶部添加了一个标题:http://jsfiddle.net/gFX5E/20/.我相信这需要使用html5shiv才能在IE8中运行. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |