css与父元素高度一致,制作CSS伪元素:与父div相同的高度
Tushar Chutani
5
html
sass
css3
我有一个父div必须在它的边缘有一个蓝色背景.我决定使用:在psedoeelement之前做到这一点.我将位置设置为绝对值,高度设置为100%.现在,当我将此高度设置为100%时,我相信之前的页面高度而不是它的div加上它几乎就好像这个psedoelement:之前是一个具有固定位置的div.这是一些代码
test
CSS
.editableDiv{
background-color: #DEDEDE;
min-height: 100px;
max-height: 400px;
overflow:scroll;
}
.editableDiv p{
padding: 0px 0px 0px 43px;
}
.editableDiv:before{
background-color:blue;
content: " ";
position:absolute;
float:left;
height: 100%;
width: 40px;
display:block;
}
我怎样才能使蓝色边缘滚动,div会根据高度自动调整高度?下面这个是对的jsfiddle问题
编辑1
添加一个位置的问题:相对于editabeDiv,只要
不进行div滚动就可以工作,但只要有滚动,就不再有从该点开始的边距.您可以尝试在jsfiddle上输入一段时间来重新调整此操作.
css与父元素高度一致,制作CSS伪元素:与父div相同的高度相关推荐
- [css] 有哪些标签是不支持伪元素的?
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
- [css] 不用换行的标签,怎么伪元素实现换行的效果?
[css] 不用换行的标签,怎么伪元素实现换行的效果? 使用\A 换行,并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';whit ...
- 伪元素的本质,以及伪元素的妙用(下)
伪元素的本质,及妙用 好了,上期讲解了什么是伪类,这期呢,我们来看看伪元素是什么? 我们可以看到,很多网站对它的定义为,用于向某些选择器设置特殊效果,这句话,真的是我还是不明白它在讲什么,太简洁了,我 ...
- vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值 获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
- 如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小编上次整理了一些基础图形的绘制方法之后,大家都纷纷表示对css3的绘图技巧学习很有帮助.虽说万变不离其宗,再复杂的图形也可以用最简单的三角形或者圆弧组合出来,但仍有不少朋友反映,学会基本图形也不懂 ...
- 【CSS】1049- 深入了解::before 和 ::after 伪元素
本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和::after是什么? ::before和::after可以添加到选择器以创 ...
- html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧
- CSS笔记(一):before伪元素实现半透明背景图
2019独角兽企业重金招聘Python工程师标准>>> 通过给元素before伪元素作为背景图片的载体,实现半透明背景. 这样的好处是避免直接调整opacity导致前景及子元素也变透 ...
- 网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式 第四章CSS样式 4.1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
最新文章
- Spring源码剖析——Bean的配置与启动
- C++Opengl三维列表堆罗汉源码
- 解读云原生下的可观察性发展方向
- HTML常用meta大全
- 关于HTTPS的几个问题
- 服务器网站管理页面打不开解决方法
- gds文件转bmp_OFD文件转换服务
- 周小川:数字人民币不会取代美元 也不会威胁全球货币体系
- OpenCore引导配置说明第三版
- linux3d游戏,笔记本linux系统能玩3d游戏吗?
- Android获取外网IP地址
- 能切换双显卡的android,安卓模拟器如何把双显卡切换成高性能显卡
- Day4:《卫报》:我们正面临着第六次大灭绝吗?
- 毕业即失业,转行软件测试的辛酸泪只有自己知道
- C语言程序设计--图书信息管理系统
- 导数的几何意义和物理意义, 求曲线y=f(x) 在相应点处的切线方程,法线方程
- web安全知识点(常见web攻击总结)
- EasyWord的使用——POI操作Word的工具
- vue学习实现待办事项功能
- 一起学习 “PS”(1、移动工具)