如果你在Chrome,FF或IE(8)上测试网站并调整窗口(高度)的大小,你可以看到滚动条动态移动,中间黄色框内的内容。
我的问题是在Safari中,它没有正确调整大小。 (滚动条不会停留在div的底部)
以下是 JSBIN TEST FILE
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将执行滚动,但在执行滚动后将报告不正确的值,除非您重复调用$ scrollElement.scrollTop()。 ...
答案 0 :(得分: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);
});
基本上你需要再次调用每次调整窗口大小时滚动滚动条的功能。
享受:)
答案 1 :(得分: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;
}
就是这样! : - )
无论如何,感谢所有帮助过我的人!