0

次のコードを試してください。

<!DOCTYPE html>
<html style="min-width:600px; overflow:auto;">
        <body style="background:grey; padding:0px; margin:0px;">
                <div style="text-align:right;">
                     this is some text
                </div>
            <div id="footer" style="
                    background:yellow;
                    position:fixed;
                    height: 100px;
                    width:100%;
                    min-width: 600px;
                    text-align:right;
                    bottom:0px;
                    ">
                    footer text
            </div>
        </body>
</html>

そのため、ブラウザ ウィンドウの幅を 600px 未満にすると、予想どおりウィンドウの下部に水平スクロール バーが表示されます。右にスクロールすると、「これはテキストです」というフレーズが表示されます。これは素晴らしいことです。ただし、「フッター テキスト」というフレーズはスクロールして表示されないため、問題が発生します。

ウィンドウのスクロールバーを右にドラッグすると、「フッターテキスト」と「これはテキスト」の両方をスクロールして表示するにはどうすればよいですか? 黄色のフッターは、常に Web サイトの下部に表示する必要があります。

これよりもクリーンなCSSソリューションをお勧めします。絶対に必要な場合は、JavaScript ソリューションを受け入れます。

ありがとう

4

2 に答える 2

1

これは、fixed要素の場合、包含ブロックが要素ではなくビューポートであるためです ( http://www.w3.org/TR/CSS2/visuren.html#fixed-positioningを参照) 。

ここで説明されているabsoluteポジショニングを使用する方法を試す必要があります: http://alistapart.com/article/footers

OP :
ありがとう。私はjqueryを使って$(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');});、それは十分に簡単だったと思います

于 2013-02-14T16:32:25.830 に答える
0

2 番目の div で最小幅を取り出します。これにより、ビューポートのサイズに関係なく、フッター テキストが常に表示されるようになります。

于 2013-02-14T16:55:09.410 に答える