基本思路：滚动条要添加到内容部分的父标签上（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. Matlab代理模式

    代理模式(Proxy)就是给一个对象提供一个代理对象,并有代理对象来控制对原有对象的引用.代理模式和装饰模式非常类似,但最主要的区别是代理模式中,代理类对被代理的对象有控制权,决定其执行或者不执行.本 ...

  2. JS中判断对象是对象还是数组的方法

    https://www.cnblogs.com/ma-shuai/p/7805264.html

  3. js数组与字符串类型相同方法的比较

    数组和字符串有很多相似的对方,比如数组和字符串都有以下方法: concat indexOf lastIndexOf slice includes 鉴于toString及valueOf方法基本类型都有, ...

  4. 在页面获取本地电脑IP

    <%@ page language="java" import="java.util.*" contentType="text/html; ch ...

  5. Odoo中的模型详解

     转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826118.html   [Odoo中,一切皆模型,连视图都是模型.Odoo将各种数据,如:权限数据.类 ...

  6. MapReduce工程(IDEA)

    MapReduce工程(IDEA) hadoop 1. maven工程 1.1 创建maven工程 1.2 修改配置文件 1.3 Mapper类 1.4 Reduces类 1.5 Driver类 1. ...

  7. C++学习（6）—— 引用

    1. 引用的基本使用 作用:给变量起别名 语法:数据类型 &别名 = 原名 #include<iostream> using namespace std; int main(){ ...

  8. PAT 乙级 1009.说反话 C++/Java

    1009 说反话 (20 分) 题目来源 给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词 ...

  9. HDU2883 kebab(最大流判断满流 + 离散化 + 区间化点)

    [题意]: 有一个烤箱,烤箱在一个时刻最多考M个肉串,N个顾客,每个顾客有属性s,n,e,t s是来的时间,n是想要的肉串数量,e是最晚离开的时间,t是烤的时间(几分熟). 顾客的烤肉可以分开烤,比如 ...

  10. python预课03 三元表达式示例,函数定义示例,七段彩码管绘制示例

    三元表达式 s = '不下雨' if s == '下雨': print('带伞') if s == '不下雨': print('不带伞') #等效与以下语句 print('带伞' if s == '下 ...