html - 复杂的 HTML/CSS 布局定位

Question

我有这个复杂的 HTML 布局:

http://jsfiddle.net/5RgjL/2/

如您所见，消息锚定在 #messages 容器的顶部。

我希望它们固定在底部，所以显示的第一条消息将在底部，而不是顶部。

此外，在调整页面大小时，滚动框内的 View 必须从底部向上滑动。很难解释，我会用一个例子让你理解:

在框中填充消息，直到已满并且有滚动条。尝试从底部调整整个窗口的大小，您可以看到底部的消息将被覆盖。我不想要这个，而是从底部向上滑动。

我尝试了很多方法，比如绝对定位 #message 容器，但我遇到了其他问题，我无法让它按我想要的方式工作。

我需要真正有 HTML/CSS 经验的人的帮助。

如果您熟悉 Facebook 消息页面，您就会明白我在做什么。

PS:一些CSS样式是用javascript应用的，因为我动态生成页面内容，只有在这个页面我需要这些样式。

Answer 1

如果我理解正确，那么为消息设置绝对底部位置直到消息多于垂直空间将解决新消息出现在底部的第一个要求。

这需要更改 CSS 和 JavaScript:

CSS

#messagesWrapper {
    position:absolute;
    bottom:0;
}

JavaScript

var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');  

function populateMessages(){
    var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
    i++;
    newMessage.hide().appendTo('#messages').stop().fadeIn(400);

    if ($messages.height() >= $messagePageContent.height()){
        messagesWrapper .css({position:'static'});
        $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
    }    
}

如果调整窗口大小时也需要发生滚动，因此还需要附加一个调整大小事件的句柄。

$(window).resize(function() {
    $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
});

但是，这还不够好，因为缺少将 CSS position 重置为其默认值的高度计算。这是 enscroll 所必需的jQuery 插件(我怀疑任何类型的滚动)都可以工作。

但我们可以简单地将所有代码重构并移动到一个通用函数中，例如:

var $messages = $('#messages');
var $messagesWrapper = $('#messagesWrapper');
var $messagePageContent = $('#messagePageContent');  

function populateMessages(){
    var newMessage = $('<div id="msg-'+i+'" class="aMessage">Another Message<br>Message ID: '+i+'</div>');
    i++;

    newMessage.hide().appendTo('#messages').stop().fadeIn(400);
    scrollMessages();
}

function scrollMessages() {
    if ($messages.height() >= $messagePageContent.height()){
        $messagesWrapper.css({position:'static'});
        $messagePageContent.stop().animate({ scrollTop: $messages.outerHeight() }, 700);
    }
}

$(window).resize(scrollMessages);

这是我在 this demo 中使用的代码.这可能不是最好的解决方案，我正在考虑使用 -webkit-transform: scaleY(-1) 来翻转容器，然后将消息翻转回来，但它弄乱了滚动(即向后滚动!)。使用 CSS 转换可能有更好的解决方案。