表格单元格内的可滚动 DIV答案

【问题标题】：Scrollable DIV inside table cell表格单元格内的可滚动 DIV
【发布时间】：2011-05-30 18:17:24
【问题描述】：

我知道，我的答案很经典，但我找不到合适的解决方案，不是在这里，也不是使用谷歌。我正在尝试使用表格创建布局。我希望 table#layout 是屏幕的 100%（不是更多）和 #content-td 滚动。我的解决方案在 FF/Chrome/Safari 中运行良好，但在 IE 中存在一些问题。如果#content-td 有height=100% IE 将设置高度等于表格高度（这是错误的，因为我有#header）。当我从#content-td 中删除height=100% 时，IE 将折叠此销售。有没有没有javascript的解决方案来修复div的高度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            html, body, #layout {height:100%; width:100%; margin:0; padding:0; overflow:hidden;}
            #wrapper {overflow-y:scroll; position:relative; height:100%}
            #content {position:absolute;}
            /* highlight areas */
            #header {background-color:#BADBAD;}
            #sidebar {background-color:#DABDAB;}
            #wrapper {background-color:#CD5C5C; font-size:40px;}
        </style>
    </head>
    <body>
        <table id="layout" border="1" cellpadding="0" cellspacing="0">
            <tr height="1%">
                <td colspan="2" id="header">Header</td>
            </tr>
            <tr valign="top" height="100%">
                <td id="content-td" width="70%" height="100%">
                    <div id="wrapper">
                        <div id="content">
                            Here is long text I want to scroll down<br/>
                            Here is long text I want to scroll down<br/>
                            Here is long text I want to scroll down<br/>
                        </div>
                    </div>
                </td>
                <td id="sidebar" width="30%">Sidebar</td>
            </tr>
        </table>
    </body>
</html>

没有 doctype 也能正常工作，但我想要一个有效的文档。这是test page。

【问题讨论】：

'IE 中的一些问题。'我以前听说过，我只是不记得在哪里……
@Time Machine：是的...我听说<b> 标签适用于除 IE 之外的所有浏览器。
@Thanatos b-tag 无论如何都不应该工作，因为它已被弃用。
您的测试页在我的 IE 中看起来不错 - 版本 8.0.7600.16385

标签： html css layout fixed

【解决方案1】：

我认为您的第一个错误是想要使用表格进行布局。我相信你已经知道它的含义，但如果你不知道，那么可能值得在网上搜索“没有表格的布局”。

听起来您实际上正在寻找的布局是主要内容正常滚动的布局，但侧面导航窗格始终位于屏幕上的固定位置。您的问题的等效解决方案，有趣的是在 CSS 中使用 position:fixed 以保持导航可见。例如，您可以制作一个主要内容框和一个导航框并使用类似这样的东西（在 Firefox 中测试）：

body {margin-right:30%;}
#navigation {position:fixed; top:0; right:0; width:30%; height:100%; background:#fcc;}

如果这不是您想要的，请提供指向某个示例站点或图表的链接。

【讨论】：

我的第一次尝试是使用position:fixed，但它一直阻碍滚动，尤其是在 IE 中。
固定位置在 IE6 中确实不起作用，但您可以在 Stack Overflow 上搜索解决方案。 “阻碍滚动”是什么问题？