纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？ 目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>test</title>

  </head>

  <style>

    .out {

      position:relative;

    }

    .out:after{

        content: "";

        clear: both;

    }

    .inner {

      position:absolute;

      height:60px;

      background-color:#afe;

      width:100%;

    }

  </style>

  <body>

    <h1>父元素的高度崩塌</h1>

    <div class="out">

      <div class="inner">

      </div>

    </div>

    <script>

    window.onload=function(){

        var h = document.getElementsByClassName("inner")[0].offsetHeight;

        console.log(h);

        document.getElementsByClassName("out")[0].style.height = h + 'px';

    }

    </script>

  </body>

</html>

jquery写法：

子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素的更多相关文章

  1. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  2. 4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

    浮动 # ps:html代码时没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...

  3. html/css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  4. 【H5疑难杂症】脱离文档流时的渲染BUG

    BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构, ...

  5. 问题记录---关于posiition脱离文档流及vue中this.$route信息

    1.关于position:fixed会脱离文档流 简单例子: 原型有三个div盒子: 将剥box1设置为position:fixed后 从上图可以看出:box1脱离了文档流,且层级显示优先于正常文档, ...

  6. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  7. HTML元素脱离文档流的三种方法

    一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...

  8. float,absolute脱离文档流的总结

    dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度 ...

  9. float的元素脱离文档流，但不完全脱离，只是提升了半层；

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

随机推荐

  1. Redis之路

    前言:数据库是一切数据的源头,因此我们没有逃避的理由 (一) 什么是redis? redis是nosql(not noly sql)产品中最为出色的一种非关系型的数据库,主要包括以下几种存储结构:St ...

  2. Ubuntu 18.04 设置开机启动脚本 rc.local systemd

    ubuntu18.04不再使用initd管理系统,改用systemd. ubuntu-18.04不能像ubuntu14一样通过编辑rc.local来设置开机启动脚本,通过下列简单设置后,可以使rc.l ...

  3. java生产环境增量发版陷阱【原】

    前言 在生产环境,我们为了降低发版风险,一般都只做增量发布,不做全量发布. 除非项目只有一到两人开发,对时间线和代码脉络结构一清二楚,才可全量发布. 然而增量发布也是有一定隐藏陷阱在里面的,以下就是笔 ...

  4. 【.Net平台下插件开发】-MEF与MAF初步调研

    背景   Team希望开发一个插件的平台去让某搜索引擎变得更好.主要用于采集一些不满意信息(DSAT)给Dev.这些信息会由不同的team提供不同的 tool分析.有的提供仅仅是一个website,有 ...

  5. H5网页适配 iPhoneX，就是这么简单

    iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...

  6. 使用Jackson时转换JSON时，日期格式设置

    在我们使用jackjson时时间默认输出如下: 输出是一串时间戳,不符合我们的要求,所以想到jackjson对时间的处理有他默认的格式,然后网上搜集各种资料,得出一下方式可以解决 取消jackjson ...

  7. asp.net mvc5 多语言应用

    需求:有些网站需要多语言显示,比如简体中文,繁体中文,英文. 1.创建一个mvc项目: 2.创建App_GlobalResources 创建了中文.英文两个语言的资源文件,中文是程序的默认语言,所以我 ...

  8. cocos2dx 动画控制概要

    -------------------------------------------------Cocos2d 播放动画Node : 节点,所有显示容器的基础 Sprite : 使用图片的节点 An ...

  9. git部分提交

    ---git add 需要提交的文件----git stash -u -k -k 开关告诉仓库保持文件的完整. -u 开关告诉仓库包括无路径的文件(那些新的和未添加到git的)----git stas ...

  10. 使用MiniProfiler检测页面性能

    1.引入nuget包 PM> Install-Package MiniProfiler 2.配置界面 @using StackExchange.Profiling; <head> . ...