CSS在html元素和固定元素上滚动最小宽度答案

【问题标题】：CSS scrolling on both html element and fixed element with min-widthCSS在html元素和固定元素上滚动最小宽度
【发布时间】：2013-02-14 16:27:06
【问题描述】：

试试下面的代码：

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

谢谢

【问题讨论】：

标签： css position fixed

【解决方案1】：

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

【讨论】：

我查看了 alistapart.com 网站的所有示例。当我将窗口缩小为 30 像素 x 30 像素时，页脚不再可见。我必须垂直滚动到底部才能看到页脚。如何使页脚始终在窗口底部而不是网页底部可见？
恐怕你必须使用 JavaScript 来实现确切的行为。
谢谢。我通过 $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); 使用 jquery 我想这很容易

【解决方案2】：

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

【讨论】：

我需要添加最小宽度，因为我计划在页脚中有很多浮动元素。元素至少需要占用 600px。如果页脚小于 600 像素，则所有内容都会浮动。