高度自适应和高度塌陷

灰太狼 2023-07-20 08:22 14阅读 0赞

高度自适应的情况：

1.  高度不去设置，或者高度设置auto 内容撑开父元素的高度。
2.  内容撑开父元素的高度 -> 最小高度的设置 min-height
3.  浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高 度塌陷

--------------------

高度自适应第一种情况：

内容撑开父元素高度

高度自适应第二种情况：

让子元素高度随着父元素高度进行改变。
            需求：让一个元素在浏览器窗口完全铺满：
            前提条件：
                body,html{
                    height:100%;
                }

###### 高度塌陷出现的场景： ######

1.  当子元素有浮动，父元素没有高度的时候，父元素会出现高度塌陷  
    注：浮动的子元素不会撑开父元素。

###### 解决高度塌陷的方法： ######

1.  给父元素添加高度 】缺点：遇到高度自适应就不行了

--------------------

1.  添加overflow:hidden 原理：触发了BFC(布局逻辑)，BFC规定计算bfc高度的时候，浮动元素也参与计算。  
    `弊端`：隐藏掉了定位在房前元素外的内容

--------------------

1.  在浮动元素的下方添加一个空的div,给div设置clear:both属性；忽略上方同级添加的浮动元素留出的空间。  
    `弊端`：形成代码的冗余。

--------------------

1.  万能清除法  
    .clear\_fix::after\{  
    content:"";//内容  
    clear:both;//忽略上方同级添加的浮动元素留出的空间  
    height:0;//高度为0  
    display:block;//转化为块状元素  
    overflow:hidden;//溢出隐藏  
    visibility:hidden;//将元素隐藏占据空间  
    \}

--------------------

1.  ie专用清除法  
    .clear\_fix\{  
    zoom:1;  
    \}

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML高度塌陷

描述父div靠子div撑开，子div全部设置浮动，父div因没有高度而出现塌陷的情况解决 1. 父div设置overflow: hidden 2. cl...

傷城~/ 2024年04月18日 19:56/ 0 赞/ 57 阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 15 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 334 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 268 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 311 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 302 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 344 阅读

相关高度塌陷问题

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-

分手后的思念是犯贱/ 2021年11月17日 17:44/ 0 赞/ 277 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 512 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 559 阅读