直接上代码:

很多时候

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* 没有高度的div */

        .box{

            padding: 20px;

            background: #ccc;

            position: relative;

            margin-bottom: 20px;

            border-radius: 40px;

            overflow: hidden;

        }

        /* 定位在左边的伪类 */

        .box:after{

            position: absolute;

            width: 20px;

            content: '';

            top: 0;

            left: 0;

            bottom: 0;

            background: red;

        }

        /* 设置top  和  bottom  让高度撑开 */

        .box>span{

            position: absolute;

            width: 20px;

            content: '';

            top: 0;

            right: 0;

            bottom: 0;

            background: red;

        }

        /* 文字中划线 拓展  margin:auto 0   上下垂直居中    left  right设置左右距离,  top  bottom上下距离一致*/

        .box:before{

            position: absolute;

            height: 2px;

            content: '';

            top: 0;

            left: 50px;

            bottom: 0;

            right: 50px;

            background: red;

            margin: auto 0;

        }

    </style>

</head>

<body>

    <div class="box">高度不确定,padding撑开的,还有伪类<span></span></div>

    <div class="box">高度不确定,padding撑开的,还有伪高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类高度不确定,padding撑开的,还有伪类类</div>

</body>

</html>

都会遇到    高度不确定的父元素,   子元素又是定位的,   让子元素撑开的时候

没有高度的div中的子元素高度自动撑开的更多相关文章

  1. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  2. 微信小程序swiper高度自适应，swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  3. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  4. CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

  5. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  7. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...

  8. 当display=none时，元素和子元素高度为0的解决办法

    在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...

  9. AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

随机推荐

  1. laravel7 h-ui模板点改

    1:html页面 <td> @if($item->fang_status == 0) <span onclick="changeFangStatus(this,{{$ ...

  2. IDEA连接Gitee

    1.gitee 1.公钥配置 公钥的作用:身份验证,免去每次提交或拉去的登录操作. 1.安装git --> 鼠标右键 --> Git Bash Here -->进入命令窗口 命令一: ...

  3. LGP5430题解

    新的 \(O(k+\log n)\) 做法. 考虑计算每个猴子对答案的贡献. 打个表: 1 1 2 4 8 16 32 ... 可以看出第 $ i $ 个猴子对答案的贡献是 \(i^k \times ...

  4. ASP.NET Core 6框架揭秘实例演示[24]：中间件的多种定义方式

    ASP.NET Core的请求处理管道由一个服务器和一组中间件组成,位于 "龙头" 的服务器负责请求的监听.接收.分发和最终的响应,针对请求的处理由后续的中间件来完成.中间件最终体 ...

  5. Mysql下载路径和安装

    下载路径 https://dev.mysql.com/downloads/mysql/ C:\Windows\system32>net start mysql 发生系统错误 2. 系统找不到指定 ...

  6. web note

    web note html note 列表 ul 无序列表 ol 有序列表 并且可以通过 type 来定义列表序号的形式 <!DOCTYPE html> <html> < ...

  7. 报错———http://mybatis.org/dtd/mybatis-3-mapper.dtd 报红解决方案

    初次使用mybatis时,下面红线上的地址报红. 解决方法是:将http://mybatis.org/dtd/mybatis-3-mapper.dtd拷贝.添加到下面标记处.

  8. RDMA——libibverbs 代码分析（1）

    下载libibverbs最新代码,https://downloads.openfabrics.org/verbs/README.html 为1.2.0版本.后面开始逐步分析libibverbs源码. ...

  9. linux内存（二）高端内存

    来此网址 https://ilinuxkernel.com/?p=1013 Linux内核地址映射模型x86 CPU采用了段页式地址映射模型.进程代码中的地址为逻辑地址,经过段页式地址映射后,才真正访 ...

  10. vulhub漏洞环境搭建

    (搭建之前建议更换成阿里的源) 在纯净ubuntu中部署vulhub环境: 1.安装docker,并用docker -v命令验证安装结果: curl -s https://get.docker.com ...