0

我有这个模板代码：

    <script type="text/javascript">
  $(function(){
    //submit new messages when the user hits enter if the message isnt blank

    now.receiveMessage = function(name, message, messagetime){
      $("#messages").append(
                    '<li class="message"><div class="sent"><a href="${path}"><img src="${gravatar}" alt="name" width="24px" height="24px" /></a><div class="display-name">'+messagetime+'<div class="body">'+ message +'</div></div></div></li>');
      }
      $("#text-input").keypress(function (e) {
          if (e.keyCode != 13 /* Return */) return;
           now.distributeMessage($("#text-input").val());
          $("#text-input").attr("value", ""); // clear the entry field.
        });
      $("#send-button").click(function(){
        now.distributeMessage($("#text-input").val());
      $("#text-input").val("");
      });
    now.name = "${user}";
  });
</script>

    <div id="chat_window">
        <div id="chat_title"><h2>Simple Chat</h2></div>
        <div id="chat_container" style="display: block">
            <div id="chat">
                <ul id="messages">
                    <li class="message notice" id="no_one_there">
                        Fix me, if there are no users!
                    </li>
                </ul>
            </div>
        </div>
        <div id="chat-form">
            <input type="text" id="text-input" />
    <input type="button" value="Send" id="send-button" />
        </div>
    </div>

这个CSS

div#chat {
width:100%;
height:100px;
overflow:scroll;
}

基本上它是一个聊天窗口，但我有一个障碍，我似乎无法弄清楚如何对齐

  • 元素，以便#chat div 的滚动条始终位于框的底部。类似于谷歌聊天窗口，您需要向上滚动才能查看旧消息。

    谢谢

    • 4

    2 回答 2

    1

    你只需要

    now.receiveMessage = function (name, message, messagetime) {
                $("#messages").append(  '<li class="message"><div class="sent"><a href="/"><img width="24px" alt="name" height="24px"></a><div class="display-name">' + messagetime + '<div class="body">' + message + '</div></div></div></li>');
document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
}


    完整的代码在这里。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>Welcome - Zeitgeist Movement Global Connect</title>
  <base href="http://zmgc.net/">
  <!-- Meta -->
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta lang="en" name="description" content="One back-office to bring them all and in the darkness bind them, in an anarchically scalable information system.">
  <!-- Canonical URL for search engines -->
  <link rel="canonical" href="http://zmgc.net/">
  <!-- CSS -->
  <link rel="stylesheet" href="/ui/core/css/yui/cssreset/reset-min.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/yui/cssgrids/grids-min.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/core.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/flags-sprite.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/widgets.css" type="text/css"><link rel="stylesheet" href="/ui/js_calendar/calendar-aruni.css" type="text/css"><link rel="stylesheet" href="/ui/wiki/style.css" type="text/css"><link rel="stylesheet" href="/ui/phoenix/style.css" type="text/css"><link rel="stylesheet" href="ui/phoenix/jquery/custom-theme/jquery-ui-1.8.16.custom.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/jplayer.pink.flag.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/zen.css" type="text/css"><link rel="stylesheet" href="/ui/core/css/jPlayer/ui.css" type="text/css"><link rel="stylesheet" href="/theme/style/;download" type="text/css">
  <!-- JavaScript -->
  <script src="/ui/core/js/jquery/jquery-1.6.2.min.js" type="text/javascript"></script><script src="/ui/core/js/javascript.js" type="text/javascript"></script><script src="/ui/core/js/raphaeljs/raphael-min.js" type="text/javascript"></script><script src="/ui/core/js/world.js" type="text/javascript"></script><script src="/ui/js_calendar/jquery.dynDateTime.pack.js" type="text/javascript"></script><script src="/ui/js_calendar/lang/calendar-en.js" type="text/javascript"></script><script src="ui/phoenix/jquery/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script><script src="/ui/core/js/jPlayer/jquery.jplayer.min.js" type="text/javascript"></script><script src="/ui/core/js/jPlayer/add-on/jplayer.playlist.min.js" type="text/javascript"></script><script src="/ui/core/js/jquery/add-on/jquery.rotate.js" type="text/javascript"></script><script src="/ui/core/js/tab.js" type="text/javascript"></script><script src="/ui/core/js/zplayer.js" type="text/javascript"></script>
  <!-- Icon -->
  <link rel="shortcut icon" href="/ui/phoenix/favicon.ico" type="image/x-icon">
</head>
<body>
    <div id="wrap">
  <!-- Add YUI3 grids-->
  <div id="hd" class="yui3-g">
      <div id="logo" class="yui3-u-1-12"><!-- logo width: 4.1666%-->
        <h1 title="Welcome - Zeitgeist Movement Global Connect">
          <a href="/" title="Welcome - Zeitgeist Movement Global Connect">Zeitgeist Movement Global Connect</a>
        </h1>
      </div> <!-- /logo-->
      <div class="yui3-u-11-12"><!-- width: 95.8333%-->
        <div class="yui3-g">
          <div id="menu" class="yui3-u-1-2"><!-- menu width: 66.6666%-->
                        <ul>
                            <li><a href="/projects">Projects</a></li>
                            <li><a href="/news">News</a></li>
                            <li><a href="/calendar">Calendar</a></li>
              <li><a href="/forums">Forums</a></li>
                            <li><a href="/;more">More »</a></li>
            </ul>
                    </div>
          <div id="user-menu" class="yui3-u-1-2"><!--  width: 33.33333%-->
                        <ul>

                        <li><a href="/./;login" class="login" title="Login">Login</a></li>


                      <li><a href="/;contact" class="contact" title="Contact">Contact</a></li>
                      <li><a href="/help" class="help" title="Help">Help</a></li>
                            <li><a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a></li>
                            <li>
                                <form action=";browse_content" method="get">
                        <div class="search placeholder-field">
                          <input name="search_text" type="text">
                          <input value="Search" class="button" type="submit">
                        </div>
                      </form>
                            </li>
                    </ul>
                </div>
            </div> <!-- /yui3-g  search and user profile-->
        </div>
  </div><!-- /yui3-g id="hd"-->




  <div id="language">

    <ul>
    <li>
      <a id="lang-en" href="http://zmgc.net/?language=en" class="selected" title="English">English</a>
    </li><li>
      <a href="http://zmgc.net/?language=fr" id="lang-fr" title="Français">Français</a>
    </li>
    </ul>
  </div>



  <!-- Bread crumbs -->
  <div>
      <label>



  <!-- Location & Views-->
  <div id="location">
    <div id="breadcrumbs">
      location »  <span><a href="/" title="Zeitgeist Movement Global Connect">Zeitgeist Movement Global Conn…&lt;/a></span>
    </div>
  </div>
  <div id="submenu">
    <span class="menu active">
      <a href="/./;view">Welcome</a>
      |
    </span><span class="menu ">
      <a href="/./;browse_content">Browse Content</a>
      |
    </span><span class="menu ">
      <a href="/./;preview_content">Preview Content</a>
      |
    </span><span class="menu ">
      <a href="/./;links">Links</a>
      |
    </span><span class="menu ">
      <a href="/./;backlinks">Backlinks</a>
      |
    </span><span class="menu ">
      <a href="/./;control_panel">Advanced</a>

    </span>
  </div>

</label>
  </div><!-- /location-->
  <!-- /Bread crumbs -->
  <div id="page">

  <!-- body -->
    <div class="yui-g">
    <!-- all other templates go within this block -->




<div class="yui3-g"><!-- content -->
  <div class="yui3-u-1-2"><!-- welcome block 40%-->
    <div class="welcome">
      <h1>Welcome  to the Zeitgeist Movement portal!</h1>
      <p>
        Founded in 2008, The Zeitgeist Movement is a Sustainability Advocacy Organization which conducts community based activism and awareness actions through a network of Global/Regional Chapters, Project Teams, Annual Events, Media and Charity Work.</p>
    </div> <!-- / welcome block 40%-->
    <!-- latest activities-->
    <div class="box-holder">
      <div class="box">
        <div class="holder">
          <div class="frame">
            <div class="box-content">
              <h3>
                <span>All the latest activities ...</span>
              </h3>
              <ul class="supports-list">
                <li class="">
                  <img src="/ui/core/resources/ico-wrote-petition.gif" alt="wrote-petition">                                    
                  <p>
                    <strong>Katia</strong> signed up to help with the Z-Day Festival: London</p>
                    <a href="#" title="Sign up to help">Sign up to help</a>
                  </li>
                  <li class="">
                    <img src="/ui/core/resources/ico-donate.gif" alt="wrote-petition">                                    
                    <p>
                      <strong>Luisa</strong> donated 5 € towards the Occupy London Fund </p>
                      <a href="#/" title="Wish to donate...">Wish to donate...</a>
                    </li>
                    <li class="last">
                      <img src="/ui/core/resources/ico-wrote-petition.gif" alt="wrote-petition">                                    
                      <p>
                        <strong>Patricia</strong> signed up to help with the Z-Day Festival: London</p>
                        <a href="#/" title="Sign up to help">Sign up to help</a>
                      </li>
                    </ul>
                  </div> <!-- /box-content-->
                </div> <!-- /frame-->
              </div> <!-- /holder-->
            </div> <!-- /box-->
          </div> <!-- /box-holder-->
          <!-- /latest activities-->
    <!-- tabs-->



    <script type="text/javascript">
        $(function() {
          $('#container-1').tabs();
          $("#container-2 > ul").tabs({ 
              navClass: "ui-tabs-sub-nav",
              selectedClass: 'ui-tabs-sub-selected',
              unselectClass: 'ui-tabs-sub-unselect',
              disabledClass: 'ui-tabs-sub-disabled',
              panelClass: 'ui-tabs-sub-panel',
              loadingClass: 'ui-tabs-sub-loading'
            });
        });

    </script>
    <div id="container-1">
      <ul>
        <li><a href="#actions"><span>Actions</span></a></li>
        <li><a href="#news"><span>News</span></a></li>
        <li><a href="#events"><span>Events</span></a></li>
        <li><a href="#chapters"><span>Chapters</span></a></li>
        <li><a href="#forums"><span>Forums</span></a></li>
      </ul>
      <div id="actions">
        {actions}
                <ul>
            <li><a href="#actions"><span>Actions</span></a></li>
            <li><a href="#news"><span>News</span></a></li>
            <li><a href="#events"><span>Events</span></a></li>
            <li><a href="#chapters"><span>Chapters</span></a></li>
            <li><a href="#forums"><span>Forums</span></a></li>
          </ul>
      </div>
      <div id="news">
        {news}
      </div>
      <div id="events">
        {events}
      </div>
      <div id="chapters">
        <div id="container-2">
          <ul>
            <li><a href="#chapter-1"><span>Africa</span></a></li>
            <li><a href="#chapter-2"><span>Americas</span></a></li>
            <li><a href="#chapter-3"><span>Asia</span></a></li>
            <li><a href="#chapter-4"><span>Europe</span></a></li>
          </ul>
          <div id="chapter-1">
              Africa
          </div>
          <div id="chapter-2">
              Americas
          </div>
          <div id="chapter-3">
              Asia
          </div>
          <div id="chapter-4">
              Europe
          </div>
        </div>
      </div>
      <div id="forums">
        {forums}
      </div>
    </div>



    <!-- /tabs-->
  </div><!-- /welcome block 40%-->
  <div class="yui3-u-1-4 media"><!-- movies, radio and events block 40%-->



        <!-- player widget-->
        <input value="" id="tmp_duration" type="hidden">
        <div id="jquery_jplayer_1" class="jp-jplayer">
          <img id="jp_poster_0">
        </div>
        <div id="jp_container_1" class="jp-video">
          <div class="jp-video-play">
            <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
          </div>
          <div class="jp-type-playlist">
            <div class="jp-gui jp-interface">
                <div class="jp-progress">
                  <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                  </div>
                </div>
                <div id="panel"><!-- /id="panel" -->
                <div class="jp-current-time">00:05</div>
                <div class="jp-duration">00:33</div>
                <div class="jp-title"><ul><li>Item Title</li></ul>
                </div>
                <div class="jp-controls-holder"> <!-- class="jp-controls-holder" -->
                  <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                    <li><a href="javascript:;" class="jp-play" style="display: block;" tabindex="1">play</a></li>
                    <li><a href="javascript:;" class="jp-pause" style="display: none;" tabindex="1">pause</a></li>
                    <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                  </ul>
                  <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value" style="width: 80%; "></div>
                  </div>
                </div> <!-- /class="jp-controls-holder" -->
              </div> <!-- /id="panel" -->
            </div>
            <a href="#" class="btn-slide">Slide bar</a>
            <div id="tab" class="tabsBlock">
              <ul class="tabs">
                <li><a index="1" href="#tabs-1" title="tabs-1">Video</a></li>
                <li><a index="2" href="#tabs-2" title="tabs-2">Audio</a></li>
                <li><a index="3" href="#tabs-3" title="tabs-3">Films</a></li>
              </ul>
              <div index="1" class="jp-playlist">
                <div id="tabs-1" class="tab-item default">
                  <ul>
                    <li class="list">
                      <a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum_512kb.mp4" ogv="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.ogv" poster="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.thumbs/Zeitgeist.Addendum_000060.jpg" class="track">
                      Zeitgeist: Addendum (2008)</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div index="2" class="jp-playlist" style="display: none;">
                <div id="tabs-2" class="tab-item" style="display: none;">
                  <ul>
                    <li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting12-04-2011/ts3_recording_11_12155E7A5.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting12-04-2011/ts3_recording_11_12155E7A5.ogg">TZM Dev Phoenix Meeting 12-04-2011</a></li>
                    <li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting12-11-2011/Tzm-dev-phx12-11-11.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting12-11-2011/Tzm-dev-phx12-11-11.ogg">TZM Dev Phoenix Meeting 12-11-2011</a></li>
                    <li class="list"><a mp="http://www.archive.org/download/TzmDevPhoenixMeeting01-01-2012/ts3_recording_12_01.mp3" href="javascript:;" title="unselect" poster="/ui/core/resources/jplayer-default0.jpg" class="track" oga="http://www.archive.org/download/TzmDevPhoenixMeeting01-01-2012/ts3_recording_12_01.ogg">TZM Dev Phoenix Meeting 01-01-2012</a></li> 
                  </ul>
                </div>
              </div>    
              <div index="3" class="jp-playlist" style="display: none;">    
                <div id="tabs-3" class="tab-item" style="display: none;">
                  <ul>
                    <li class="list"><a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist_512kb.mp4" ogv="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist.ogv" poster="http://www.archive.org/download/ZeitgeistTheMovie/Zeitgeist.gif" class="track">Zeitgeist</a></li>
                    <li class="list">
                      <a href="javascript:;" title="unselect" m4v="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum_512kb.mp4" ogv="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.ogv" poster="http://www.archive.org/download/Zeitgeist.Addendum/Zeitgeist.Addendum.thumbs/Zeitgeist.Addendum_000060.jpg" class="track">
                      Zeitgeist: Addendum (2008)</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
    </div>
    <!-- /player widget-->




    <div class="yui3-g">
      <div class="yui3-u-1-3" id="watch-related-container">
         <!--  <iframe width="300px"height="200" src="http://www.youtube.com/embed/QYLLFpNn4lM" frameborder="0"></iframe> -->
             <ul id="watch-related" class="video-list">
               <!-- video-list-item -->
               <li class="video-list-item">
                 <a href="videos/video-item" class="video-list-item-link">
                   <span class="ux-thumb-wrap contains-addto">
                     <span class="video-thumb">
                       <span class="clip">
                         <img src="/ui/core/resources/jplayer-default1.jpg" alt="clip-title">
                         <span class="uix-button-content">
                           <span class="addto-label">Add to</span>
                         </span>
                       </span><!-- /clip-->
                       <span class="video-time">14:30</span>
                       <button class="addto-button video-actions" type="button">
                         <img src="/ui/core/resources/pixel.gif" class="uix-addto-button">
                       </button>
                       <span dir="ltr" class="title" title="Video Title">Video Title</span>
                       <span class="stat">
                         by <span dir="ltr" class="yt-user-name ">username</span>
                       </span><!-- /stat-->
                     </span><!-- /video-thumb-->
                   </span><!-- /ux-thumb-wrap contains-addto-->
                 </a>
               </li>
               <!-- /video-list-item -->
             </ul><!-- /watch-related .video-list-->
         </div><!-- /watch-related-container-->
      <div class="yui3-u-2-3">
        <img src="../../ui/icons/48x48/skin.png" border="0">

        events table
      </div><!-- /yui3-u-2-3-->
    </div><!-- /yui3-g-->
  </div><!-- /movies, radio and events block 40%-->
  <div class="yui3-u-1-4 chat"><!-- right side bar 20%-->
    <!-- START DYNAMIC CONTENT -->
    <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTheZeitgeistMovement&amp;width=290&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=119920878043766" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:290px; height:290px;" scrolling="no"></iframe>
    <!-- <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <fb:like-box href="http://www.facebook.com/zeitgeist" width="300" connections="15"></fb:like-box> 
     END DYNAMIC CONTENT -->
    <div class="listings items">
    <h3>Follow us on...</h3>
    <a href="http://www.facebook.com/" target="_blank"><img src="/ui/core/resources/facebook.png" width="48" height="48" border="0"></a>
    <a href="http://twitter.com/Zeitgeist" target="_blank"><img src="/ui/core/resources/twitter.png" width="48" height="48" border="0"></a>
    <a href="http://feeds.feedburner.com/TheZeitgeistMovement" target="_blank"><img src="/ui/core/resources/rss_icon_48.jpg" width="48" height="48" border="0"></a>
    <a href="http://www.youtube.com/user/TZMOfficialChannel" target="_blank"><img src="/ui/core/resources/youtube.png" width="48" height="48" border="0"></a> 
    </div> <!-- END DYNAMIC CONTENT -->
    <!-- I LIKE IT -->
    <div class="thumb-rating">
        <form method="post" action="you-know-you-like-it" class="disabled">
            <span class="thumbs-up">
                <input alt="Please log in to rate this product" value="Like" disabled="disabled" name="lovinit" class="allowMultiSubmit like-button" type="submit"></span>
            <span class="thumbs-down">
                <input value="Ugh" disabled="disabled" name="hatedit" class="allowMultiSubmit dislike-button" type="submit"></span>
        </form>
        <div class="like-summary">
            <span class="total-thumbs-up">
                <span class="tally-total">0</span> likes,
            </span>
            <span class="total-thumbs-down">
                <span class="tally-total">0</span> dislikes
            </span>

        </div>
        <div class="discreet login-to-rate">
            <a href="/;login" class="link-overlay">Log in</a> to rate.
        </div>
    </div>
    <div class="button">
    <ul>
        <li class="forum"><a href="/forum">Forum</a></li>
    </ul>
    </div>
    <!-- /I LIKE IT -->

    <script src="http://zmgc.net:29080/nowjs/now.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //submit new messages when the user hits enter if the message isnt blank

            now.receiveMessage = function (name, message, messagetime) {
                $("#messages").append(
                        '<li class="message"><div class="sent"><a href="/"><img width="24px" alt="name" height="24px"></a><div class="display-name">' + messagetime + '<div class="body">' + message + '</div></div></div></li>');
                document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight;
            }
            $("#text-input").keypress(function (e) {
                if (e.keyCode != 13 /* Return */) return;
                now.distributeMessage($("#text-input").val());
                $("#text-input").attr("value", ""); // clear the entry field.
            });
            $("#send-button").click(function () {
                now.distributeMessage($("#text-input").val());
                $("#text-input").val("");
            });

            now.name = "";

        });

    </script>

        <div id="chat_window">
            <div id="chat_title"><h2>Simple Chat</h2></div>
            <div id="chat_container" style="display: block">
                <div id="chat">
                    <ul id="messages">
                        <li class="message notice" id="no_one_there">
                            Fix me, if there are no users!
                        </li>
                    </ul>
                </div>
            </div>
            <div id="chat-form">
                <input id="text-input" type="text">
        <input value="Send" id="send-button" type="button">
            </div>
        </div>

  <ul id="status">
      <li><a href="#" id="usersLink">5 users</a></li>
      <li><a href="#" id="usersLink">uptime: <span id="uptime">?</span></a></li>
      <li><a href="#" id="usersLink">memory: <span id="rss">?</span>mb RSS</a></li>
    </ul>




  </div><!-- /right side bar 20%-->
</div><!-- /content -->


    <!-- /all other templates go within this block -->
    </div>
  <!-- /body -->
</div><!-- /YUI3 grids-->
</div> <!-- /end of wrap-->
<div id="footer">
    <div class="yui3-g" id="upper-footer"><!-- upper-footer -->



  <div class="yui3-u-3-4 upper_footer">
      <h4 id="tzm">Zeigeist Links</h4>
      <ul class="footer_nav">
        <h4>Zeigeist</h4>
        <li>
          <a href="/;about">About</a>
        </li>
        <li>
          <a href="/blog">Blog</a>
        </li>
        <li>
          <a href="/;contact">Contact &amp; Support</a>
        </li>
        <li>
          <a href="/training">Training</a>
        </li>
        <li>
          <a href="#">Site Status</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>Tools</h4>
        <li>
          <a href="/;create">Chapter Generator</a>
        </li>
        <li>
          <a href="#">Activies Board</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>Documentation</h4>
        <li>
          <a href="#">Chapter Sites</a>
        </li>
        <li>
          <a href="#">Developers</a>
        </li>
      </ul>
      <ul class="footer_nav">
        <h4>External Links</h4>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Media</a>
        </li>
      </ul>
  </div><!-- /yui3-u-3-4 -->
  <div id="worldmap" class="yui3-u-1-4"></div>


    </div><!-- /upper-footer -->
    <div id="lower-footer">
          <ul>
            <li class="space">
              <h1 title="Welcome - Zeitgeist Movement Global Connect">
                <a href="/" title="Welcome - Zeitgeist Movement Global Connect">
                  striving for a better future since 2008</a>
                </h1>
              </li>
              <li><a href="/;about">About</a></li>
              <li><a href="/;more">More</a></li>

              <li><a href="/;login_form">(not logged in)</a></li>


          </ul>
    </div><!-- /lower-footer -->
</div><!-- /footer -->
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
</body>
</html>
    于 2012-04-29T18:38:01.630 回答
    1

    我看到你只想做这个 CSS，好吧，你可以，但它有它的缺点。让我们从一个如何使用 html/css 完成的简单示例开始。

    http://jsfiddle.net/sg3s/hkTaZ/

    这不使用JS。

    编辑：

    对于您提供的链接中的聊天框，您需要添加以下样式：

    #chat {
    overflow: hidden;
    position: relative;
}

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

    但是，当你想滚动到顶部时，你必须实现一些东西才能滚动到顶部。那将需要一些 JS 来操作内容的底部属性。

    您指向的库确实使用了 jQuery，尽管它不是很明显，因此您可以使用 jQuery 来实现此功能。

    尽管看到您已经使用 JS，但每次将消息附加到聊天中时，滚动到底部会更容易，就像@jams 回答一样。

    编辑：

    看到您当前的实现使用 javascript，我建议您在每次将消息添加到#messages列表时都使用 @jams 建议滚动到底部。

    于 2012-04-29T19:27:30.840 回答