1

我知道，我的回答很经典，但我找不到合适的解决方案，不是在这里，也不是使用谷歌。我正在尝试使用表格创建布局。我希望它table#layout是 100% 的屏幕（不是更多）并且#content-td可以滚动。我的解决方案在 FF/Chrome/Safari 中运行良好，但在 IE 中存在一些问题。如果#content-td有height=100%IE 将设置高度等于表格高度（这是错误的，因为我有#header）。当我height=100%从#content-tdIE 中删除时，此销售将崩溃。有没有没有 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 可以正常工作，但我想要一个有效的文档。这是测试页。

4

1 回答 1

-1

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

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

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

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

于 2010-12-26T11:05:57.557 回答