精华内容
下载资源
问答
  • W3C标准的算法里,float可能参与父级高度计算,但position:absolute;始终不参与父级计算。就是这样设计的,没辙: ...W3C CSS2.1 10.6.3规定了未创建BFC的非替换块级元素的高度计算规则: This section also ...

    原文链接:https://segmentfault.com/q/1010000000686154/a-1020000000686760

    W3C标准的算法里,float可能参与父级高度计算,但position:absolute;始终不参与父级计算。就是这样设计的,没辙:

    W3C CSS2.1 10.6.3规定了未创建BFC的非替换块级元素的高度计算规则:

    This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.

    If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:

    The element's height is the distance from its top content edge to the first applicable of the following:

    1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
    2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
    3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
    4. zero, otherwise

    如上述分点,分项1定义了line-box撑高容器,分项2和3定义了常规流块级元素撑高容器(margin折叠与否的两种情况),否则为0。

    W3C CSS2.1 10.6.7规定了创建了BFC的元素(block formatting context roots)的高度计算规则:

    If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.
    If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.
    Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.
    In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

    这里规则大致跟上方一样,不同点在于margin不再折叠和float高度参与计算。

    总之呢,在“撑高父容器圈”里面没有绝对定位元素的地位。

    展开全文
  • 我们经常会遇到一个问题那就是在对子元素进行定位以后,就无法撑开父级元素,这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right或者float:left

    我们经常会遇到一个问题那就是在对子元素进行定位以后,就无法撑开父级元素,这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right或者float:left

    方案二:

    position: absolute;
    white-space: nowrap;

    展开全文
  • 我一直很困惑绝对定位后父盒子的高度会变为0,如何让绝对定位元素撑开父盒子呢? 我在StackOverflow上找到的高分解决方案如下: Absolutely positioned elements are completely removed from the document flow, ...

    我一直很困惑绝对定位后父盒子的高度会变为0,如何让绝对定位的元素撑开父盒子呢?

    我在StackOverflow上找到的高分解决方案如下:

    Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.

    If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.

    Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.

    翻译:
    绝对定位的元素完全从文档流当中移走,所以他们的尺寸无法影响到父元素的尺寸。
    如果你真的想实现绝对定位还能撑开父元素,只能通过JavaScript实现:获取到绝对定位的子元素的高度,再设置给父元素。
    或者,用 float: left / float:right 还有 margin 来调整位置,子元素再通过父元素设置的overflow:hidden来撑开父元素。

    展开全文
  • 因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素。test.out {position:relative;}.out:after{content: "";clear: both;}....

    纯粹的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写法:

    effd27ab0cb35e8cfd028853449c1749.png

    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是两 ...

    展开全文
  • 子元素设置了绝对定位父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度。 子元素的高度是不确定的 可以JS设置父元素高度 <body><<...
  • 纯粹的CSS无法实现。因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素。 在这里插入代码片 ...
  • 如果我没有设置绝对定位的话,不给html,body设置{height:100%,weight:100%}时,单独的给下面包裹的div设置height,width:50%时,div的高度是有里面的字体撑开的,它的高度不是窗口的一半。按照我们理解的那样,以...
  • (1)在浮动子元素后面添加 ...(3)绝对定位/静止定位(absolute/fixed)。 (4)父元素也跟着浮动。 (5)父元素设定高度。实质上并没有解决问题,但效果看起来是一样的,如果父元素高度固定,可以用这个方法。
  • 发现把div去掉浮动或都去掉相对定位的话,ul就可以自适应变宽。但还是不知道什么原因导致这样。因为就是需要ul的父级既是浮动又是相对定位页求是解这如前总回随4泉标使幻近面的是,些小端结事机8水移用灯近面的是,些...
  • 关于margin-top会撑开父元素的解决办法 解决方法: 1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用) 2、为父元素添加overflow:hidden;样式即可(完美) 3、为父元素或者子元素声明浮动...
  • 按照CSS规范,浮动元素(float)后会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列,所以不会撑开父元素的高度。但是很多时候我们需要页面根据内容自动调整高度的。如何解决这个...
  • 笔者在写网页时,发现一个问题,当一个父元素没有设置高度,而全靠子元素1撑起高度时,此时子元素2就无法继承父元素的100%高度,代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&...
  • 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。 解决方法: 1、修改父元素的高度,增加padding-top样式...
  • 元素未定时,父盒子宽高为0,其宽高能由子盒子撑开。 定位时,父盒子高度无法被撑开。 定位元素与浮动一样,脱离文档流,无法撑开父盒子的高度 ...
  • 父元素加overflow:hidden,并且添加如下类: .clearf:after{ content:’ '; display:block; clear:both; }
  • 当我们在代码中给子元素添加浮动或者绝对定位时,父元素会存在高度塌陷问题,可以使用JS来解决。 首先通过获取子元素的高度,将子元素的高度传给父元素,同时在页面窗口或框架被调整大小时获取子元素高度并传给...
  • 根据 CSS2.1 规范中的描述,浮动元素将尽可能的向左或向右浮动,直到该元素的外边界碰到其包含块的边界或另一个浮动元素的外边界。 换句话说,当浮动元素的包含块能够在横向完全容纳该元素时,该元素不会再继续撑...
  • 父元素的padding-top活着padding-bottom 设置该百分比; 子元素设置绝对定位:top:0 left:0; 补充:在用div里装图片是 子元素宽度设置100%时,底部会有一小段空白 解决方案:将img的display属性设置...
  • 前提:父元素高度自动,需要子元素撑开父元素 当子元素使用 float 时,脱离文档流,父元素高度塌陷,但是可以使用 zoom:1 + 伪元素 使其清除浮动,从而使得父元素高度被子元素撑开。   当子元素使用absolute时,...
  • position:absolute; white-space: nowrap;
  • 1,硬编码给定父元素的高度 2,换思路!换思路!!换思路!!!一定要抛弃现在布局的思路,去使用其他的布局方式,不然这个问题会纠结你一生的!!!! 转载于:...
  • css有办法实现相对定位的盒子,被有绝对定位的子盒子撑开吗? 前言: 如果是通过百度看到我这篇帖子的朋友,那么恭喜你,你在我这里找到了答案,但是这个答案可能不是你想要的,但是我的方法可以解决你的需求,因为...
  • 今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了; function psize(){ $("...
  • white-space: nowrap;     转载于:https://www.cnblogs.com/leaf930814/p/8422849.html
  • 给父级元素添加overflow:auto;
  • 如何使绝对定位内部元素不继承父级宽度,而是靠内容自动撑开宽度? 经常写hover 效果的时候,不经意间,父级有宽度,而hover 里的内容是撑开的,正常情况下 hover 的宽度,不是撑开的就会继承父级的宽度:例如hover...
  • position: absolute; white-space: nowrap;  
  • 子元素设置绝对定位之后脱离文档...下面的这个子元素设置绝对定位后,父元素宽高都为0 了。 如何让他自己撑开!Document* {margin: 0;padding: 0;}.loading-box {position: fixed;top: 50%;left: 50%;border: 1px so...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,416
精华内容 2,566
关键字:

绝对定位撑开父元素