Question

请尝试以下代码：

<!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解决方案。

由于

Answer 1

这是因为对于fixed元素，包含块不是en元素而是视口（cf. http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning）

您应该尝试使用absolute定位：http://alistapart.com/article/footers

所述的方法

OP说：
谢谢。我通过$(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');});使用jquery我觉得这很容易

Answer 2

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

CSS使用min-width在html元素和固定元素上滚动

2 个答案: