CSS位置固定。 Div包装器必须垂直固定，但必须水平变化 [英] CSS position fixed. Div wrapper must be fixed vertically but must be varying in horizontally

问题描述

我有一个div，像这样

I have a div , something like this

  #footer
   {   position:fixed;
       left:40px;
       top:0px; 
   }

当垂直或水平滚动时，位置是固定的。但我想要的div是固定的，当用户垂直滚动滚动条，但应该是变化的，当用户水平滚动滚动条。

The position is fixed when I scroll vertically or horizontally. But i want the div to be fixed when user scrolls the scroll bar vertically but should be varying when user scrolls the scroll-bar horizontally.

我看到一些论坛和帖子，但大多是我发现jquery脚本。我想知道如果有一个方法来做它在CSS？

I have seen some of the forums and posts but mostly I found jquery script.I want to know if there is a way to do it in CSS?

固定位置在一个方向与CSS
我阅读这篇文章，但我不明白jquery脚本。请让我知道在css中执行此操作的方法或使用jquery执行此操作的更好方法。

Fixed position in only one direction with CSS I read this post but I did not understand the jquery script. Kindly let me know the way to do it in css or the better way to do it with jquery.Thanks

推荐答案

似乎是不可能得到这个看起来很好只有CSS / HTML。
正如 Ruup 或，对其进行分层，是一个不错的选择。

Seems to be impossible to get this "look fine" with only CSS/HTML. As mentioned from Ruup or Fixed position in only one direction with CSS, layering over JS for it, is a good option.

幸运的是，我找到了一种方式让它工作（不是那么漂亮）：
http://jsfiddle.net/MKEbW/5/

Fortunately, i found a way to get it work somehow (not that beautiful): http://jsfiddle.net/MKEbW/5/

HTML（在body-tag内）：

HTML (inside the body-tag):

<div id="simulated-html">
    <div id="footer">
        <span>
            <!-- Footer text here -->
        </span>
    </div>
    <div id="simulated-body">
        <!-- Your website here -->
    </div>
</div>

CSS：

* { margin:0; padding:0; }

html {
    font: 12px/1.5em Georgia;
}
p { padding: 5px; }

html, body {
    height: 100%;
    overflow: hidden; /* hide scrollbars, we create our own */
}

#simulated-html {
    background: orange;
    overflow-x: scroll; /* force horizontal scrollbars (optional) */
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */
    position: relative; /* to align #footer on #simulated-html */
    height: 100%;
}

#simulated-body {
    overflow-y: scroll; /* force vertical scrollbars (optional) */
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */
    height: 100%;
    background: #eee;

    /* use as a container */
    width: 450px;
    margin: 0 auto;
}

#footer {
    position: absolute;
    bottom: 0px; /* vertical align it to #simulated-html */
    width: 100%;
    background: red;
    z-index: 99; /* always show footer */
    color: white;
}
#footer span {
    width: 450px;
    margin: 0 auto;
    background: green;
    display: block;
}

似乎适用于IE7 +和现代浏览器， browserlab.adobe.com

​ Seems to work in IE7+ and modern browsers, tested via browserlab.adobe.com.

在Chrome 18中测试使用滚动条，更小和更宽的视口。

Tested with scrollbars, smaller and wider viewports in Chrome 18.

不支持浏览器和/或JS解决方案的后备。

I recommend a fallback for not capable browsers and/or a JS workaround.

这篇关于CSS位置固定。 Div包装器必须垂直固定，但必须水平变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！