<!DOCTYPE>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="keywords" content="滚动条, scrollbar, 页面底部, 聊天窗口, " />

    <meta name="description" content="有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最 下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。" />

    <title>将滚动条（scrollbar）保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>

</head>

<body>

    <div id="example">

        <h3 id="example_title">将滚动条（scrollbar）保持在最底部的方法</h3>

        <div id="example_main">

            <script type="text/javascript">

                function add()

                {

                    var now = new Date();

                    var div = document.getElementById('scrolldIV');

                    div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';

                    div.scrollTop = div.scrollHeight;

                }

            </script>

            <span class="notice">请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br />

            <div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">

            </div>

            <input type="button" value="插入一行" onclick="add();">

        </div>

    </div>

</body>

</html>

保持在Div 底部的方法的更多相关文章

  1. div 底部固定方法（不用position定位）

    方法一:全局增加一个负值下边距等于底部高度 <style> html, body { height: 100%; margin: 0; } .content { padding: 20px ...

  2. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  3. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  4. 一个div居于另一个div底部

    一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  5. css的div垂直居中的方法，百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  6. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  7. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  8. DIV相对于父DIV底部对齐的实现方法

    代码如下 <style type="text/css"> .box1 {border:1px #cccccc solid; width:500px; height:60 ...

  9. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

随机推荐

  1. mysql导入外部sql脚本的方法

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/29689853 导入的方法分为两种:一是採用图 ...

  2. traits编程---萃取容器中迭代器的类型等

    可以直接利用STL中定义好的traits_iterator来萃取 /*特性萃取器*/ template <class unknown_class> struct unknown_class ...

  3. ubuntu12.04LTS安装以及卸载 QT4.8.6和QT creator2.5.2

    鉴于,下载QT5.5安装,编译总是有问题,可能是配置不正确. 于是按照论坛的一些资料,就换回QT4版本,具体实施步骤如下: 在qt官网http://download.qt.io/archive/ 下的 ...

  4. Error unmarshalling file:/opt/test/jboss/server/defalt/conf/bootstrap.xml

    启动命令:#/usr/local/jboss/bin/run.sh -b 0.0.0.0 -c defalt 启动的defalt写错了,应该写default.

  5. WebApi FormData+文件长传 异步+同步实现

    // POST api/values public async Task Post() { try { // 检查该请求是否含有multipart/form-data if (!Request.Con ...

  6. Maven构建项目速度太慢的解决办法 Maven 调试

    Apache Maven是当今非常流行的项目构建和管理工具,它把开发人员从繁杂的项目依赖关系处理事务中解放出来,完全自动化管理依赖问题.在Web应用开发过程中,通常我们会用到maven的archety ...

  7. web项目中遇到的Maven包依赖冲突问题解决

      在搭建web项目时,出现一个比较诡异的问题,任何JSP页面突然都不能够正常地显示,系统爆出HTTP:500(服务器内部错误)的页面   HTTP Status 500 - java.lang.No ...

  8. Maven assembly插件进行自定义构建

    众所周知,Maven是一个约定优于配置的java构建工具,通常我们只需要定义非常少的内容,就可以根据package标签属性来构建生成的jar, war包的相关内容. 如果想要对maven中依赖的内容一 ...

  9. jquery Autocomplete函数

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. USB驱动程序之USB设备驱动程序1简单编写

    1.驱动编写分析 (1)usb总线驱动程序在我们接入USB设备的时候会帮我们构造一个新的usb_device.注册到总线里面来.左边这一块已经帮我们做好了,我们要做的是右边这一块.我们要构造一个usb ...