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 时，如预期的那样，窗口底部会出现一个水平滚动条。当我向右滚动时，“这是一些文本”这句话会滚动到视图中，这很棒。但是，短语“页脚文本”不会滚动到视图中，这就是问题所在。

当我将窗口滚动条向右拖动时，如何让“页脚文本”和“这是一些文本”滚动到视图中？黄色页脚必须始终出现在网站底部。

我更喜欢一个干净的 CSS 解决方案。如果绝对必要，我会接受 javascript 解决方案。

谢谢

4

2 回答 2

1

这是因为对于fixed元素，包含块不是 en 元素而是视口（参见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

取出第二个 div 的最小宽度。无论视口的大小如何，这将允许页脚文本始终显示。

于 2013-02-14T16:55:09.410 回答