1

私の答えは古典的ですが、ここでもグーグルを使用しても、適切な解決策を見つけることができません。テーブルを使用してレイアウトを作成しようとしています。table#layout画面の 100% (それ以上ではない) で#content-td、スクロールしたいです。私のソリューションは FF/Chrome/Safari では問題なく動作しますが、IE ではいくつかの問題があります。IEが高さをテーブルの高さと同じに設定する場合（私が持っているので間違ってい#content-tdます）。IEから削除すると、この販売が崩壊します。divの高さを修正するためのjavascriptなしの解決策はありますか?height=100%#headerheight=100%#content-td

<!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

あなたの最初の間違いは、レイアウトにテーブルを使用したいことだと思います。その意味についてはすでにご存知だと思いますが、そうでない場合は、おそらく「テーブルのないレイアウト」を Web で検索する価値があります。

実際に探しているレイアウトは、メイン コンテンツが通常どおりスクロールするレイアウトですが、サイド ナビゲーション ペインは常に画面上の固定位置にあるようです。あなたの問題に対する同等の解決策は、おかしなこと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 に答える