Jquery Safari 6，它不能正确调整大小（滚动条不能停留在底部）_Jquery_Html_Css_Safari_Resize

Jquery Safari 6，它不能正确调整大小（滚动条不能停留在底部）

jquery html css safari

Jquery Safari 6，它不能正确调整大小（滚动条不能停留在底部）,jquery,html,css,safari,resize,Jquery,Html,Css,Safari,Resize,如果您在Chrome、FF或IE（8）上测试站点并调整窗口大小（高度），您可以看到滚动条随着中间黄色框中的内容动态移动我的问题是，在Safari中，它无法正确调整大小。（滚动条不会停留在div的底部）这是 HTML: <body> <div id="message_box"> <div id="header"> Header </div> <div id="content">

如果您在Chrome、FF或IE（8）上测试站点并调整窗口大小（高度），您可以看到滚动条随着中间黄色框中的内容动态移动

我的问题是，在Safari中，它无法正确调整大小。（滚动条不会停留在div的底部）

这是

HTML:

<body>
    <div id="message_box">

        <div id="header"> Header </div>

        <div id="content">

            <ul id="msg_list">

                <li>Test file</li>
                <li>Test file</li>
                <li>Test file</li>
                <li>Test file</li> <!-- ...and so on -->   

           </ul>

       </div>

       <div id="footer"> Footer </div>

    </div>
</body>

html, body {
    height: 100%;
}

#message_box {
    width: 500px;
    float: left;
}

 #header {
    width: 500px;
    height: 50px;
    background-color: #aaa;
    text-align: center;
}

#content {
    min-height: 150px;
    width: 500px;
    position: relative;
    background-color: #ffa;
    border: solid #cdd1d8;
    border-width: 2px 0 2px 0;
    overflow-y: scroll !important;
    overflow-x: hidden;
}

#msg_list {
    width: 100%;
    position: absolute;
    bottom: 100px;
    margin-bottom: 50%;
    left: 0;
    display: block;
    height: 1px;
}

#footer {
    height: 300px;
    padding: 10px;
    background-color: #aaa;
    text-align: center;
}

jQuery（v1.10.1）：

有人能告诉我为什么Safari会发生这种情况，以及如何处理

更新：

您必须向上/向下调整窗口大小，才能看到测试文件//第一条消息/“在Safari中消失

以下是一份：

。。。Safari 6将执行滚动，但在执行滚动后将报告不正确的值，除非您重复调用$scrollElement.scrollTop（）

在下面找到能解决你问题的答案

HTML+CSS保持不变

$(document).ready(auto_size);

$(window).resize(function () {
    auto_size();
    $("#content").scrollTop($("#content")[0].scrollHeight);
});



function auto_size() {

    var body_content_msg = $("body").height(),
        header_content_msg = $("#header").height(),
        footer_content_msg = $("#footer").height(),
        newHeight = body_content_msg - header_content_msg - footer_content_msg + "px";

    $("#content").css("height", newHeight);
}

$(document).ready(function () {

    $("#content").scrollTop($("#content")[0].scrollHeight);

});

基本上，您需要再次调用在每次调整窗口大小时滚动滚动条的函数

享受：）

经过（许多）天的尝试，我终于找到了解决方案

我在CSS中更改

页边距底部：50%至页边距底部：200px
#msg_list {
        width: 100%;
        position: absolute;
        bottom: 100px;
        margin-bottom: 200px;
        left: 0;
        display: block;
        height: 1px;
}

就这些！：-）
无论如何，感谢所有帮助过我的人 在Firefox（最新版本）和Safari（最新版本）的OS X上看起来是一样的。这在个人电脑上的Safari 5上会发生吗？请记住，Safari for PC已经停止使用，最新版本已经有一年多的历史了。@InsertUserName我在OS X/Safari 6Ah上测试过这里，我知道Safari会自动向上滚动一点。我认为您需要在变量中缓存新的高度，并强制滚动位置到底部。aldanux，您可以在变量中保持底部位置。没有利润底线：50%在safariHey很好谢谢。。但这不是我想要或解决我的问题。问题是当您滚动到“向上”以读取，例如“//Last Message/”，然后调整窗口大小时，再次转到第一条消息，您必须向上滚动以读取最后一条消息。@aldanux我知道您的问题，因为我能够复制它。我提供给你的代码解决了这个问题。无论您是否调整浏览器的大小，滚动条将始终停留在末尾-您将能够随时阅读最后一条消息。@Thanos。。此问题仅在Safari 6中出现。*（我对这个经过测试的浏览器没有问题：Chrome、FF和IE 8@aldanux我知道你的问题出在safari上。通过提供的代码，你可以在safari中解决这个问题，它可以在所有其他浏览器上运行。safari处理滚动条的方式与其他浏览器不同，当你调整浏览器大小时，可滚动容器不会保留scrollbar以前的位置，因此使用我的解决方案，每次调整浏览器大小时，我们都会将滚动条重新定位到底部。
#msg_list {
        width: 100%;
        position: absolute;
        bottom: 100px;
        margin-bottom: 200px;
        left: 0;
        display: block;
        height: 1px;
}