基本思路:滚动条要添加到内容部分的父标签上(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)等

div中显示某个网页

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

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

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

div中添加滚动条

div中显示页面

在css中显示页面,在页面布局中很多时候都要在一个div 里显示某些页面.在这里写下我用到的一种方式.

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

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

div中设置滚动条的问题

这样的一个div,当文本超出的时候我们就会设: overflow: ...

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

1.代码   ...

在css中定义滚动条样式

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

在指定的div中搜索内容,并滚动显示到当前搜索到的内容处

我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

随机推荐

LeetCode之263. Ugly Number

------------------------------------------------------------- 如果一个数的质因子只包括2,3,5,那么这个数n可以表示为:n=2x+3y+ ...

ASP.NET CORE dotnet run 命令使用debug方式运行

由于我的开发环境比较复杂,每次调试一套项目都要启动好几个VS,比较繁琐,今天决定换一种方式调试,对于不该改动的代码的附加项目直接使用dotnet run命令以debug的运行方式运行, 一开始无法运行 ...

java微信接口之四—上传素材

一.微信上传素材接口简介 1.请求:该请求是使用post提交地址为: https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token=A ...

week 9 scenario testing

1:How do you expect different personas to use your software?  What’s their need and their goals,  ho ...

UVaLive5031 Graph and Queries(时光倒流+名次树)

题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20332 [思路] 时光倒流+名次树(rank tree). 所谓“ ...

Handlebars expressions

Basic Usage 1,最简单的handlebars 表达式

{{title}}

使用时,会在当前context里找名为title的property,替换 ...

DRF 序列化组件

Serializers 序列化组件 Django的序列化方法 class BooksView(View): def get(self, request): book_list = Book.objec ...

(转)区块链共识机制分析——论PoW,PoS,DPos和DAG的优缺点

近期,随着区块链技术在社区中的声音越来越大,业界已经开始从技术角度对区块链进行全方位的解读.作为第一批区块链技术的实现,传统比特币与以太坊在共识机制.存储机制.智能合约机制.跨链通讯机制等领域并没有非 ...

无法启动程序,因为计算机丢失D3DCOMPILER_47.dll 的解决方法

这个原因应该是windows update在更新的时出现错误导致的 解决方法是安装 KB4019990  更新包. 网址如下:http://www.catalog.update.microsoft.c ...

【DMQ引擎】-DMQ多进程插件引擎服务平台介绍

写过服务端项目的程序员可能都有非常痛苦的经历,服务端经常奔溃,无从查起.的确一个服务端要稳定下来要经过长期的积累,不停的测试,调试,发现问题,解决问题.这个周期可能很长,几个月,甚至以年计算.许多企业 ...

在html中加入滚动条,html在div中显示滚动条相关推荐

  1. HTML怎么在背景中加视频,css – 在div中嵌入视频作为背景(bootstrap)

    我试图在div中添加一个视频作为背景(.form-container),过去我对完整背景页面做同样的事情,但在这种情况下我只需要在div中,问题:dunno how要做到这一点,我正在玩宽度,但视频不 ...

  2. php中scrolling,如何设置浮动框架是否显示滚动条scrolling?

    在上篇文章中,我们了解了iframe是什么意思啊?浮动框架iframe详解,然而很多人不知道如何设置浮动框架是否显示滚动条scrolling?下面我们来讲解一下scrolling 属性? 一:什么是s ...

  3. html文本框不显示滚动条,html怎么设置不显示滚动条

    html设置不显示滚动条的方法:首先新建一个HTML代码页面:然后在html代码页面上创建div:接着设置scroll-box.scroll类样式:最后给scroll-box设置一个高度和内容超出后隐 ...

  4. html向下滚动条,《html》不显示滚动条,鼠标滑轮可以控制向下滚动是怎么回事?...

    1.完全隐藏 在boby里加入scroll=no,可隐藏滚动条: boby scroll=no 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示: boby ...

  5. html自动缩放不出现滚动条,HTML页面缩小后显示滚动条的示例代码

    这里记录一下如何使得HTML页面缩小之后,底部出现滚动条,使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方. 说一下这样做的好处. 首先,一般界面缩小之后不出现滚动条,用户就不能访问被隐藏的地方 ...

  6. html鼠标滑轮不显示滚动条,《html》不显示滚动条,鼠标滑轮可以控制向下滚动是什么原因?...

    1.完全隐藏 在boby里加入scroll=no,可隐藏滚动条: boby scroll=no 2.在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条:反之,则显示: boby ...

  7. canvas中添加html,如何在DIV中添加html5 CANVAS

    GOK.. 9 试试这段代码,肯定会对你有用: Game Stage function loadCanvas(id) { var canvas = document.createElement('ca ...

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

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

  9. JS动态在div中添加元素

    先是放一个空的div,让后根据指标的数据,动态的往div中添加元素.动态往div中添加元素:for (var n = 0; n < data.length; n++){//获取divvar di ...

最新文章

  1. Kali Linux 2020.1b发布了
  2. oracle对sga统计信息不对,关于oracle sga设置的总结,很经典--转
  3. wxpython安装_01Python安装教程与特色介绍
  4. 双十一大促技术只做两件事情?来看看阿里巴巴的技术之道
  5. Spring源码分析前篇
  6. socket编程流程与函数(实用篇)
  7. BZOJ1079 [SCOI2008]着色方案 记忆化搜索
  8. 年审是当月还是当天_车检是按月份还是日期 审车日期以什么为准
  9. 激光雷达与毫米波雷达对比
  10. 蚂蚁金服 3 个项目进入 CNCF 云原生全景图 | 开源
  11. Jeecg-Boot使用war包在Tomcat中部署之参考教程
  12. java 支付类的接口,Java后端支付大杂烩之core.dao,service,web(重点是接口的设计)(二)...
  13. eve星战前夜登录提示服务器维护中,EVE星战前夜进不去怎么办 游戏进不去问题解决方法...
  14. 志愿者公交车上当导游(图)
  15. java引用队列_java的强引用、软引用、弱引用、幻象引用,引用队列总结
  16. 读博天赋更重要还是努力更重要?
  17. 雷电2接口_Steinberg 发布旗舰级 32 bit / 384 kHz 雷电 2 音频接口 AXR4
  18. 计算机网络数据链路层之MAC协议概述
  19. 如何查看oracle隐含参数,Oracle如何查看隐含参数
  20. 一文搞定基因型数据清洗

热门文章

  1. Qt设置应用程序图标
  2. 797C C. Minimal string
  3. redis主从配置 从而实现数据备份和读写分离
  4. IDEA 方法注释模板和类注释模板
  5. 4.1 MyEclipse中搭建Struts2开发环境
  6. HDU2204 Eddy's爱好(容斥原理)
  7. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
  8. SharePoint品牌化和自定义--第三章节--收集品牌化需求(3)--要当心的地方
  9. 开始记录学习C++的历程
  10. 怎么看台式计算机是几位的,怎么查看自己电脑型号