Javascript 添加新消息（元素）后的固定位置查看内容_Javascript_Html_Css_Structure_Skype

Javascript 添加新消息（元素）后的固定位置查看内容

javascript html css

Javascript 添加新消息（元素）后的固定位置查看内容,javascript,html,css,structure,skype,Javascript,Html,Css,Structure,Skype,任务： <body> <div id="header">HEADER</div> <div id="sidebar" class="f_left"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> <div id="container" class="

任务：

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};

用HTML在Skype上聊天

问题：

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};

添加新邮件后没有滚动内容

说明：

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};

有一个共同的网站结构：页眉、内容和页脚。有必要将内容“隐藏”在标题下，但在窗口的可见部分仅保留内容的一部分（较低（Skype上的消息历史记录））。添加新邮件时，内容必须向上滚动到此新邮件的高度，并且邮件应显示在网站中心块（内容）的底部，但不应位于页脚下

在这种情况下，应保持滚动

HTML：

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};

JS：

<body>
<div id="header">HEADER</div>
<div id="sidebar" class="f_left">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="container" class="f_right">
  <div id="wrap3">
    <div id="wrap2">
      <div id="wrap1">
        <div id="content">
          <div id="im_nav_wrap">asdasdasdasd</div>
          <div id="im_content">
            <div class="im_rows_wrap">
            <div id="im_rows" class="im_peer_rows">
                <div class="mes">sddsfsdfsdfsdf</div>
                <div class="mes">sdfdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">sdfsdf</div>
                <div class="mes">fsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
                <div class="mes">fdsfsdfsdf</div>
            </div></div>
          </div>
          <div id="im_footer_wrap">
            <textarea name="dialog" id="im_textarea" cols="50" rows="6"></textarea>
            <button onclick="IM.send(this);">submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

body {
  width: 980px;
  margin: 0 auto;
}
#header {
  top: 0;
  z-index: 100;
  text-align: center;
  width: 980px;
  position: fixed;
  height: 40px;
  background: #cdcdcd;
}
#sidebar {
  top: 60px;
  width: 200px;
  height: 100px;
  background: #666;
  position: fixed;
}
.f_right {
  width: 600px;
  float: right;
}
#content {

}
#im_nav_wrap {
  position: fixed;
  top: 40px;
  z-index: 100;
  width: 400px;
  height: 70px;
  background: #ff0ccc;
}
#im_content {
  padding: 120px 0 150px ;
}
#im_rows {

}
.im_rows_wrap {
   position: relative;
}
#im_rows {
  position: absolute;
  bottom: 80px;
  width: inherit;
}
.mes {
  width: 200px;
  padding: 10px;
  background: #f6f6f6;
  margin-top: 10px;
}
#im_footer_wrap {
  height: 100px;
  width: 300px;
  position: fixed;
  bottom: 20px;
}

$(document).ready(function() {
  $('.im_rows_wrap').height($('#im_rows').height());
});

IM = {
  send: function(el) {
    var ta = $(el).prev('textarea').val();

    if (ta) {
      $('#im_rows').append('<div class="mes">' + ta + '</div>');

      $('.im_rows_wrap').height($('.im_rows_wrap').height() + $( ".mes" ).last().height())
    }
  }
};

$（文档）.ready（函数（）{
$（'.im_rows_wrap'）.height（$（'.im_rows'）.height（））；
});
IM={
发送：功能（el）{
var ta=$（el.prev（'textarea'）.val（）；
如果（ta）{
$（'im#u行'）。追加（''+ta+''）；
$（'.im_rows_wrap'）.height（$（'.im_rows_wrap'）.height（）+$（“.mes”）.last（）.height（））
}
}
};

因此您需要类似的内容：

http://jsfiddle.net/CLzfW/7/

使用一点jQuery

$('.button').click(function(e){
  e.preventDefault();
    $('.expander').slideToggle();
     $('html, body').animate({scrollTop: $(document).height()}, 'slow');
});

在事件单击时（例如按钮单击、新消息），它会滚动到div的底部，您还希望在其上有一个滚动条？

。不能使用JQuery自动滚动。在未来，这将产生一个大问题。建议在JS上用纯CSS+操作高容器来完成所有事情。如果没有JavaScript，我不知道从哪里开始