2

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

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

这是JSBIN 测试文件

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>

CSS：

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):

$(document).ready(auto_size);

$(window).on("resize", auto_size);

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);

});

有人能解释一下为什么在Safari中会发生这种情况以及如何处理吗？

更新：

您必须向上/向下调整窗口大小才能看到“测试文件 // FIRST MESSAGE //”在 Safari 中消失。

这是一个Safari 6 错误测试：

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

4

2 回答 2

0

在下面找到可以解决您问题的答案。

HTML + CSS保持不变。

JS

$(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);

});

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

享受 ：）

于 2013-09-02T06:26:12.503 回答
0

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

我在 CSS 中更改margin-bottom: 50%;为margin-bottom: 200px; 

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

仅此而已！:-)

无论如何感谢所有帮助过我的人！

于 2013-09-06T23:29:38.000 回答