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

test

.out {

position:relative;

}

.out:after{

content: "";

clear: both;

}

.inner {

position:absolute;

height:60px;

background-color:#afe;

width:100%;

}

父元素的高度崩塌

window.οnlοad=function(){

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

console.log(h);

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

}

jquery写法：

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

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

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

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

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

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

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

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

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

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

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

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

float,absolute脱离文档流的总结

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

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

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

HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

随机推荐

Python基础篇【第5篇】: Python模块基础(一)

模块 简介 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就 ...

select 通过jq赋值

浅谈javascript中的作用域

首先说明一下:Js中的作用域不同于其他语言的作用域,要特别注意     JS中作用域的概念: 表示变量或函数起作用的区域,指代了它们在什么样的上下文中执行,亦即上下文执行环境.Javascript的作 ...

HDOJ 1302(UVa 573) The Snail(蜗牛爬井)

Problem Description A snail is at the bottom of a 6-foot well and wants to climb to the top. The sna ...

iOS学习之懒加载

懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,其实是重写getter方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再去进行实例化 使用懒 ...

Git操作指南

请访问以下网址,很详细,今天偷个懒记录一下,之后有时间再来补全吧! https://git-scm.com/book/zh/v2

XamarinSQLite教程添加索引

XamarinSQLite教程添加索引 索引可以提升数据库表的查询速度.下面为已存在的表添加索引,操作步骤如下: (1)右击Students,选择Add index…(beta)命令,弹出Add In ...

限流——spring-cloud-zuul-ratelimit

先留个坑,慢慢补 git代码Demo:https://github.com/islowcity/spring-cloud-zuul-ratelimiter.git 有时间再写分析

js數組

數組對象創建: var a=new Array(); var b=new Array(1); var a=new Array(“AA“,”AA“): 相關函數: sort()排序,可以進行字面上排序s ...

试着理解cookie和session

web服务一个特点是提供个性化服务,为很多客户端提供服务,那么每个用户不同,服务自然不同,所以要记住用户及其状态,这也很多应用软件的通用功能. 由于http是无状态的,Session和Cookie是两 ...