基本思路：滚动条要添加到内容部分的父标签上（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. 9.Javascript原生瀑布流

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. android 连接wifi案例

    1.xml布局文件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  3. AI面试刷题版

    (1)代码题(leetcode类型),主要考察数据结构和基础算法,以及代码基本功 虽然这部分跟机器学习,深度学习关系不大,但也是面试的重中之重.基本每家公司的面试都问了大量的算法题和代码题,即使是商汤 ...

  4. Spring MVC 上传、下载、显示图片

    目录 1. 准备工作 1.1 数据库表准备 1.2 实体类 User 和 Mapper(DAO) 1.3 pom.xml 依赖包 1.4 SSM 框架的整合配置 2. 控制器 UserControll ...

  5. Golang: 解析JSON数据之二

    上次我们介绍了 Go 语言中序列化和反序列化 JSON 数据的两个方法 Marshal() 和 Unmarshal(),并以示例演示了它们的用法. 我们在例子中看到,需要事先声明好对应的结构体,才能跟 ...

  6. Golang: 打印命令行参数

    记得最早在学校机房学习 Java 时,照着书上的例子,写一个最简单 main 方法,当程序运行并在屏幕上打印出 hello world 时,内心竟有种莫名的激动,相信很多人都有这种经历吧. 不管学什么 ...

  7. OSPF 多区域配置

    通过配置OSPF协议使网络互通. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f1/0 192.168.10.1/24 R1 f0/0 192.168.20.1/24 R1 f ...

  8. Beta冲刺第5次

    二.Scrum部分 1. 各成员情况 翟仕佶 学号201731103226 今日进展 新增将图片转为粉笔画功能代码 存在问题 难者不会,会者不难,主要是参数设置问题 明日安排 视情况而定,可能还是写扩 ...

  9. C++学习（7）—— 函数提高

    1. 函数默认参数 在C++中,函数的形参列表中的形参是可以有默认值的 语法:返回值类型 函数名 (参数=默认值){} 注意 如果某个位置已经有了默认参数,那么从这个位置往后,从左到右都必须有默认值 ...

  10. 项目Beta冲刺（团队）——博客集合

    项目Beta冲刺(团队)--博客集合 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:集中记录所有Beta敏捷冲刺日志的集 ...