html - position:Firefox の絶対位置

Question

左側にテキスト、右側にさまざまなロゴなどを配置したシンプルな 2 列のページを作成しようとしています。右の列の一番下に、テキストを配置する必要があります。私が必要としていたのはシンプルなposition: absolute; width: 250px; bottom: 0;ものだけのように思えました。これが私が思いついたコードで、ここでもホストされています：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
    margin: 0px;
    background-color: #eee;
}#content{
    background: white;
    width: 900px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}#text{
    padding-left: 8px;
    padding-right: 8px;
}.left{
    width: 634px;
    border-right: 2px solid black;
}.right{
    width: 250px;
    text-align: center;
    position: relative;
}.bottom{
    position: absolute;
    width: 250px;
    bottom: 0;
}
</style>
</head>
<body>
    <center>
        <div id="content">
            <div id="body">
                <table border=0>
                    <tr valign="top">
                        <td id="text" class="left">
                            Some text
                        </td><td class="right">
                            <center class="bottom">
                                Bottom
                            </center>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </center>
</body>
</html>

このソリューションは、Firefox を除くすべてのブラウザーで機能します。Firefox は、要素をに設定されているかのように扱い、要素position:fixedの下部 (通常は画面の下部から離れています) ではなく、画面の下部にロックします。この問題を抱えている人を他に見つけられないようです。これは、私が何か間違ったことをしていることを意味します。私はこれを何時間もいじりましたが、結果は変わりません。どんな助けでも大歓迎です。

score 1 · Accepted Answer

私の理解が正しければ、Firefox は仕様とほぼ一致しています。詳細はこちらからご覧いただけます

ここで、「なぜ」の質問に答えます（他の人は方法に答えています:)。私の理解によると、仕様はページスクロールの位置を（再）計算することを述べていません。それはほとんど実装に依存する IMO です。絶対配置された要素に相対配置された親が存在しない場合、表示可能なビューポート/ウィンドウに対して配置されます。bottom:0したがって、Firebug を開くと、要素がfirebug ウィンドウの上部にあることがわかります。スクロールすると、その値は再計算されないようです。

ウィンドウに関して配置を開始すると、事態はおかしくなり、その影響を知っておく必要があります(おそらくそのうちの1つにつまずいたでしょう:) @Rohitが提案したように親divでラップするか、言及された@thenewguyのようなフロートを使用することをお勧めします

score 0 · Accepted Answer

位置決めには2 つのを使用divします。このような

ライブデモ

コードは

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
    margin: 0px;
    background-color: #eee;
}#content{
    background: white;
    width: 900px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
}#text{
    padding-left: 8px;
    padding-right: 8px;
}.left{
    width: 634px;
    border-right: 2px solid black;
}.right{
    width: 250px;
    text-align: center;
  height:150px;
  background:red;
    position: relative;
}.bottom{
    position: absolute;
    width: 250px;
    bottom: 0;
  background:green;
}
</style>
</head>
<body>
    <center>
        <div id="content">
            <div id="body">
                <table border=0>
                    <tr valign="top">
                        <td id="text" class="left">
                            Some text
                        </td><td>
<div class="right">
                      <center class="bottom">
                                Bottom
                            </center>
                      </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </center>
</body>
</html>

score 0 · Accepted Answer

あなたはこれを必要以上に難しくしています。この回答はあなたの説明に基づいていますが、うまくいくはずです。また、私はピクセルの使用を信じていないため、内部のパーセンテージに基づいてこれを行うつもりです (モバイルデバイスを扱うことで、ピクセルから遠ざかりました)。ここに行きます：

body {
margin: 0 auto;
background-color: #eee;
}
#content {
background: white;
width: 900px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
#left{
width: 72%;
border-right: 2px solid black;
overflow: hidden;
}
#right{
width: 25%;
text-align: center;
float: right;
overflow: hidden;
}
#bottom{
float: right;
width: 25%;
}

コードを Web ページに配置するだけでなく、上記のコードをスタイルシートファイルに配置して呼び出す必要がありますが、それは単なるセマンティクスです。このスタイルシートの HTML コードは次のとおりです。

<html>
    <head>
    ... (do whatever you need to here, including the stylesheet call)
    </head>
    <body>
        <div id="content">
            <div id="left">
            ...(place your stuff that goes on the left here)
            </div>
            <div id="right">
            ...(place your stuff that goes on the right here)
            </div>
            <div id="bottom">
            ...(place your stuff that goes on the bottom right here)
            </div>
        </div>
    </body>
</html>

これで基本的なレイアウトが得られるはずです。ここで、左側の div が右側の div と同じ高さでない場合、2 つのセクションの間に作成している垂直線が完全に下がらないことに注意してください。これがどのように機能するかをお知らせください。さらにお手伝いできることを確認させていただきます。

**今後の参考のために、私はスタイリングにテーブルを使用することを避ける傾向があります。Web ページがかなり複雑になると、対処が難しくなる傾向があります。div やその他の要素は、はるかにうまく機能する傾向があります。

html - position:Firefox の絶対位置

3 に答える 3

Related

Reference