1

現在、私のレイアウトはテーブルを使用していますが、Opera と IE では、すべての td height 100% が機能しません。

Firefox/Chrome では、下の図のように動作します。

html構造

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td style="height:32px;"></td>
                </tr>
            </table>
        </td>
        <td style="width:64px"></td>
    </tr>
<table>

では、これを div にするにはどうすればよいでしょうか。

私はグーグルで最初のdiv位置を絶対位置と高さ32pxに設定してから、それを下の0に設定し、2番目のdivは高さ100％の絶対位置と上：0下：32pxに設定しましたが、写真のようにはまったく機能しません。

テーブルからレイアウトを移行する方法を教えてもらえますか?

アップデート

一部のページの私のphpスクリプトは、トップバーを動的に追加します。

現在のレイアウト:

<div id="leftside">
    <div id="topbar"></div>

    <div id="php-generated-content">
      <div id="autofill"></div>
      <div id="bottombar"></div>
    </div>
</div>
<div id="rightside">
    <div id="right-menu"></div>
</div>

写真と同じですが、上部に高さ:32px の上部バーをもう 1 つ追加し、上部と下部のバーの間に緑色の部分が自動で塗りつぶされます。

4

2 に答える 2

2

これを試して

CSS

body, html{
    height:100%;    
}
.leftPan{
    width:80%;
    background-color:#066;
    height:100%;
    float:left;
    position:relative;
}
.rightPan{
    height:100%;
    width:20%;
    background-color:#09F;
    float:right;
}
.footer{
    position:absolute;
    height:32px;
    bottom:0;
    left:0;
    width:100%;
    background-color:#963;
}

html

<div class="leftPan">
    Left Panel
    <div class="footer">Footer</div>
</div>
<div class="rightPan">
    Rigt Panel
</div>

jsFiddle ファイル

于 2013-07-04T13:39:01.793 に答える
0

必要なスクロール動作の種類によって異なります。永続的なオンスクリーン パネルとスクロールするメイン パネルを用意するのは簡単です。

<html>
<head>
<style type="text/css">
body { padding:0 64px 32px 0; }
.right-col { background:red; width:64px; height:100%; position:fixed; right:0; top:0 }
.footer { background:green; height:32px; position:fixed; left:0; right:64px; bottom:0 }
</style>
</head>
<body>
[content]
<div class="right-col"></div>
<div class="footer"></div>
</body>
</head>

メイン エリアの高さに基づいてフッターを移動する場合 (画面の下部より上に移動しないようにする場合) は、はるかに困難です。私が見た唯一の良い解決策は JavaScript です。

于 2013-07-04T13:46:07.667 に答える