Question

我知道，我的答案是经典的，但我找不到合适的解决方案，不是在这里，也不是谷歌。我正在尝试使用表格创建布局。我希望table#layout为100％的屏幕（不是更多）和#content-td滚动。我的解决方案在FF / Chrome / Safari中运行良好，但在IE中有一些问题。如果#content-td有height=100%，IE会将高度设置为等于表高度（这是错误的，因为我有#header）。当我从height=100%移除#content-td时，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。

Answer 1

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

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

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

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

表格单元格内的可滚动DIV

1 个答案: