基本思路：滚动条要添加到内容部分的父标签上（div），内容部分不设置大小，父标签要明确设置大小，并且父标签要添加overflow样式，并设置成auto。

打开的效果如下：

这时可能有人会问，父div的长度和宽度如何确定呢？有时候这个父div是需要根据页面的大小来自动适应的！！！！！例如下边这种页面是很常见的:

其中header部分、sider部分、footer部分是固定宽度的，而content区域是要适应不同窗口大小的，这时这个content大小就是问题了。

解决的办法有我有两种：

1、利用css 的 flex布局，具体如何做，可以搜索去学，但flex貌似是ie9即以下的ie不行；

2、利用css的calc函数，通过减掉固定的像素后得到具体的像素大小；实例代码如下：

页面的效果如下：

  

由于例子中使用了flex布局，所以要求IE浏览器最低版本为10！！！

calc函数书写的时候一定要注意！函数内表达是的运算符前后必须要用空格隔开！

对的：calc(100vh - 10px - 10px)

错的：calc(100vh-10px-10px)、calc(100vh -10px -10px)等

html在div中显示滚动条的更多相关文章

  1. div中显示某个网页

    原文:div中显示某个网页 1.<iframe>方法 2.ajax方法 ajax+流实现无框架限制块刷新: 主框架index页面: js: $(function(){ $("#d ...

  2. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

  3. div中出现滚动条，自动保持在最底端---显示聊天窗口最新的信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. div中添加滚动条

    <div style="position:absolute; height:400px; overflow:auto"></div>div 设置滚动条显示: ...

  5. div中显示页面

    在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式. <script type="text/javascript"> ...

  6. 第三方文本框 在div中显示预览，让指定节点不受外部css影响

    例如,富文本框中 ol  li 但是我们往往全局样式时候会 让前面的数字不显示,但是富文本框时候,录入,我们需要显示,但是div中就不显示了 我们在预览页面中加上一个指定样式   然后后面 加上!im ...

  7. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

  8. Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   ...

  9. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...

随机推荐

  1. Beego 学习笔记三：Beego业务逻辑

    1>     打开main.go文件,查看代码 点击快捷键F12,进入beego.go文件,查看代码 2>     打开router.go文件,查看路由 3>     打开defau ...

  2. 记一次针对Centos的入侵分析

    离开厂家多年,很久没有碰这类事件了. 回顾: 2017年9月末,接到一个朋友转述的求助信息.他一客户的服务器被黑了.服务器上所跑业务上的金额也全部被人转走了. 朋友的客户加我后,没头没尾的问我能不能做 ...

  3. Java集合学习(8)：LinkedList

    一.概述 LinkedList和ArrayList一样,都实现了List接口,但其内部的数据结构有本质的不同.LinkedList是基于链表实现的(通过名字也能区分开来),所以它的插入和删除操作比Ar ...

  4. Golang: 常用的文件读写操作

    Go 语言提供了很多文件操作的支持,在不同场景下,有对应的处理方式,今天就来系统地梳理一下,几种常用的文件读写的形式. 一.读取文件内容 1.按字节读取文件 这种方式是以字节为单位来读取,相对底层一些 ...

  5. Xinetd超级守护进程

    Xinetd超级守护进程 00.什么是xinetd服务 xinetd(extended Internet services daemon), 是新一代网络守护进程服务程序, 又叫超级守护进程. 经常用 ...

  6. [FreeRTOS].FreeRTOS CortexM3 M4中断优先级设置总结

    转自:https://blog.csdn.net/xukai871105/article/details/53516857 前言本文将说明在FreeRTOS嵌入式操作系统中,如何设置STM32 Cor ...

  7. Codeforces A. Kyoya and Colored Balls（分步组合）

    题目描述: Kyoya and Colored Balls time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  8. dfs 之 下一个排列

    52. 下一个排列 中文English 给定一个整数数组来表示排列,找出其之后的一个排列. Example 例1: 输入:[1] 输出:[1] 例2: 输入:[1,3,2,3] 输出:[1,3,3,2 ...

  9. 2019年杭电多校第二场 1002题Beauty Of Unimodal Sequence(LIS+单调栈)

    题目链接 传送门 思路 首先我们对\(a\)正反各跑一边\(LIS\),记录每个位置在前一半的\(LIS\)中应该放的位置\(ans1[i]\),后一半的位置\(ans2[i]\). 对于字典序最小的 ...

  10. Linux的sz和rz命令

    工作中需要在Linux和Windows之间传输文件时,一般使用winscp或者ftp工具来完成,最近才知道有sz和rz这两个命令,方便好用. sz  下载 从Linux下载文件到本机 , 在Linux ...