<!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. riotjs 简单使用&&browserify 构建

    项目地址: http://riotjs.com/ 备注: 为了简单使用了 browserify 进行构建 1. 项目结构 ├── app.css ├── gulpfile.js ├── index.h ...

  2. keil 赋值之后再声明变量提示错误error: #268: declaration may not appear after executable statement in block

    勾选 C99 Mode 即可 假如没有C99 Mode的选项,那么我们可以用大括号将代码括起来,这样编译也不会报错 if( (! bMemAddrAllowAccess(checkAddr) )) { ...

  3. Java 设计模式之单例模式（一）

    原文地址:Java 设计模式之单例模式(一) 博客地址:http://www.extlight.com 一.背景 没有太多原由,纯粹是记录和总结自己从业以来经历和学习的点点滴滴. 本篇内容为 Java ...

  4. WebApi和Andriod对接访问模式问题

    最近在做WebApi和Andriod接口的对接,中途出现一个问题就是返回格式的问题.由于之前使用WebService的时候使用的一直都是json的序列化和反序列话格式,所以一开始在webapi中通样使 ...

  5. WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (一)

    WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (一) 编写人:CC阿爸 2015-1-28 在伍华聪的博客中,看到布局控件"Weife ...

  6. 深入理解jQuery框架-框架结构

    这是本人结合资料视频总结出来的jQuery大体框架结构,如果大家都熟悉了之后,相信你们也会写出看似高档的js框架: jquery框架的总体结构 (function(w, undefined){ //定 ...

  7. TCP之二：TCP的三次握手与四次分手

    一.TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更深入的了解TCP的工作,我们就继续.它只是一个超级麻烦的协议,而它又是互联网的基础 ...

  8. [转][c#]注册表经验集

    在 win7 64位的系统中,为了将程序做成绿化版(单EXE文件),一些设置准备放到 regedit(注册表)中. 测试时发现网上的 demo 可以读,但写的值调试不报错,相应位置却不存在,困扰了许久 ...

  9. ESXI5-WIN2008R2安装域控以及额外域笔记

    每次安装域控都要找教程,每次都没法一次性搞定.写个笔记吧...主要是给自己看的.写的比较含糊.不清楚的可以直接QQ本人. 1.安装WIN2008R2,192.168.188.10 2.上载SLICET ...

  10. 关于i++的解释

    根据 JavaScript Language Specification 的定义, 表达式 A=B的执行步骤,简单地说,就是:1. 对等号左边的表达式 A 进行计算,算出最终的结果,必须是参照或变量: ...