在开发中我们往往要去除默认滚动条,但是其在竖直方向的滚动效果仍然需要。

<div id="parent">
<div id="child">
<h1>文本区</h1>
<h1>文本区</h1>
<h1>文本区</h1>
</div>
</div>
#parent {
width: 100px;
height: 100px;
border: 1px solid green;
overflow: hidden;
}
#child {
width: 150px;
height: 100px;
overflow-x: hidden;
}

其中父级div的width为100px,子div的宽度为150px,就是说在水平方向,子div是有溢出的。

当我们给子div添加一个overflow-x:hidden的属性及属性值后,便将子div的溢出部分隐藏掉。效果达成。

overflow妙用--去除默认滚动条,内容仍可滚动的更多相关文章

  1. 在Hmtl页面中只让其中单独的一个div隐藏滚动条但是仍可滚动浏览下边的内容

    <style> .box ::-webkit-scrollbar {width: 0px;} </style> <div class="box"> ...

  2. div隐藏滚动条,仍可滚动

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

  3. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  4. .Net 序列化(去除默认命名空间,添加编码)

    1.序列化注意事项 (1).Net 序列化是基于对象的.所以只有实例字段呗序列化.静态字段不在序列化之中. (2)枚举永远是可序列化的. 2.XML序列化时去除默认命名空间xmlns:xsd和xmln ...

  5. table标签去除默认边框

    table去除默认边框 1.在没有出去默认边框时,改变底部颜色,依然显示1px左右的白色边框 2.为table 加上 border="0" cellpadding="0& ...

  6. Confluence 6 自定义默认空间内容

    中文标题[自定义默认空间内容] Confluence 管理员 可以编辑用于创建主页和新站点的模板.默认的内容将会在新空间创建后的主页上显示出来.这个与站点空间,个人空间和空间蓝图的模板是不同的. 模板 ...

  7. Xshell中vim退出内容仍停留在屏幕的问题

    Xshell中vim退出内容仍停留在屏幕的问题 我每次在vim中退出后内容都显示在屏幕上面,看上去特别烦,就在网上看了下,通过调试成功. 第一种方法:在xshell中设置 1.这是我在vim中退出的状 ...

  8. 设置cnblogs默认滚动条样式

    默认滚动条样式丑嘛就不谈了~这里修改为个性化滚动条样式. CSS代码 /*滚动条整体样式*/ body::-webkit-scrollbar { width: 10px; height: 1px; } ...

  9. meta设置与去除默认样式--移动端开发整理笔记(一)

    视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-s ...

随机推荐

  1. .net core mvc + mysql dbfirst 生成 ado.net 数据模型

    1.点击“工具”->“NuGet包管理器”->“程序包管理器控制台” 安装一下包 Install-Package MySql.Data.EntityFrameworkCore -Pre I ...

  2. POJ1083(Moving Tables)--简单模拟

    题目链接:http://poj.org/problem?id=1083 如图所示在一条走廊的两侧各有200个房间,现在给定一些成对的房间相互交换桌子,但是走廊每次只能通过一组搬运, 也就是说如果两个搬 ...

  3. Python函数知识点总结

    1.函数的定义2.如何定义一个函数以及函数语法3.函数的调用4.函数的参数(形参,实参)以及参数的传递5.函数的返回值6.变量的作用域7.匿名函数8.嵌套函数和闭包9.装饰器10.函数思维导图 1.函 ...

  4. oracle exists和 not exists 的用法

    比如 a,b 关联列为 a.id = b.id,现在要取 a 中的数据,其中id在b中也存在: select * from a where exists(select 1 from b where b ...

  5. 单元测试自动生成工具evosuite

    github地址:https://github.com/EvoSuite/evosuite 官网地址:http://www.evosuite.org   快速开始: 1.  junit  <de ...

  6. *p 和p[i] 区别

    注意:*(arr+ n -1)指向的 是原来&a[n-1]是个地址 与arr[n-1]不同 !!重点!

  7. 马的遍历(BFS

    https://www.luogu.org/problemnew/show/P1443 模板BFS...... #include<iostream> #include<cstdio& ...

  8. springboot中访问html页面

    springboot中如果想访问html页面,不每访问一个页面就写一个Controller,可以统一写一个公共的controller方法 代码: (1)引入hutool工具依赖 <!-- hut ...

  9. Java&Selenium数据驱动【DataProvider+TestNG+Mysql】

    Java&Selenium数据驱动[DataProvider+TestNG+Mysql] package testNGWithDataDriven; import java.io.IOExce ...

  10. Please, commit your changes or stash them before you can merge. Aborting

    1.stash 通常遇到这个问题,你可以直接commit你的修改:但我这次不想这样. 看看git stash是如何做的. git stash    git pull    git stash pop ...