文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS等高布局的方式有哪些

2024-04-02 19:55

关注

这篇文章给大家介绍CSS等高布局的方式有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现和js判断这四种真等高布局

伪等高

边框模拟  

因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上,实现视觉上的等高效果

[注意]左右两侧元素高度不能大于中间元素高度,否则无法撑开容器高度

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{   
        position: relative;   
    }   
    .center{   
        box-sizing:border-box;   
        padding: 0 20px;   
        background-clip: content-box;   
        border-left: 210px solid lightblue;   
        border-right: 310px solid lightgreen;   
    }   
    .left{   
        position: absolute;   
        top: 0;   
        left: 0;   
        width: 200px;   
    }   
    .rightright{   
        position: absolute;   
        top: 0;   
        rightright: 0;   
        width: 300px;   
    }   
    </style>

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  
        <div class="left">  
            <p>left</p>  
        </div>     
        <div class="center" style="background-color: pink;">  
            <p>center</p>  
            <p>center</p>  
        </div>             
        <div class="right">  
            <p>right</p>  
        </div>           
    </div>

CSS等高布局的方式有哪些

负margin  

因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果

[注意]如果页面中使用<a>锚点跳转时,将会隐藏部分文字信息

[注意]如果页面中的背景图片定位到底部,将会看不到背景图片

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{   
        overflow: hidden;   
    }   
    .left,.centerWrap,.rightright{   
        float: left;   
        width: 50%;   
        padding-bottom: 9999px;   
        margin-bottom: -9999px;   
    }   
    .center{   
        margin: 0 20px;   
    }   
    .left,.rightright{   
        width: 25%;   
    }   
    </style>

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  
        <div class="left" style="background-color: lightblue;">  
            <p>left</p>  
        </div>     
        <div class="centerWrap">  
            <div class="center" style="background-color: pink;">  
                <p>center</p>  
                <p>center</p>  
            </div>            
        </div>  
                
        <div class="right" style="background-color: lightgreen;">  
            <p>right</p>  
        </div>

CSS等高布局的方式有哪些

真等高

table  

table元素中的table-cell元素默认就是等高的

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{   
        display: table;   
        width: 100%;   
        table-layout: fixed;   
    }   
    .left,.centerWrap,.rightright{   
        display: table-cell;   
    }   
    .center{   
        margin: 0 20px;   
    }   
    </style>

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  
        <div class="left" style="background-color: lightblue;">  
            <p>left</p>  
        </div>     
        <div class="centerWrap">  
            <div class="center" style="background-color: pink;">  
                <p>center</p>  
                <p>center</p>  
            </div>            
        </div>    
        <div class="right" style="background-color: lightgreen;">  
            <p>right</p>  
        </div>

CSS等高布局的方式有哪些

absolute  

设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{   
        position: relative;   
        height: 40px;   
    }   
    .left,.center,.rightright{   
        position: absolute;   
        top: 0;   
        bottombottom: 0;   
    }   
    .left{   
        left: 0;   
        width: 100px;   
    }   
    .center{   
        left: 120px;   
        rightright: 120px;   
    }   
    .rightright{   
        width: 100px;   
        rightright: 0;   
    }   
    </style>

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  
        <div class="left" style="background-color: lightblue;">  
            <p>left</p>  
        </div>     
        <div class="center" style="background-color: pink;">  
            <p>center</p>  
            <p>center</p>  
        </div>             
        <div class="right" style="background-color: lightgreen;">  
            <p>right</p>  
        </div>           
    </div>

CSS等高布局的方式有哪些

flex  

flex中的伸缩项目默认都拉伸为父元素的高度,也实现了等高效果

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{   
        display: flex;   
    }   
    .left,.center,.rightright{   
        flex: 1;   
    }   
    .center{   
        margin: 0 20px;   
    }   
    </style>

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  
        <div class="left" style="background-color: lightblue;">  
            <p>left</p>  
        </div>     
        <div class="center" style="background-color: pink;">  
            <p>center</p>  
            <p>center</p>  
        </div>             
        <div class="right" style="background-color: lightgreen;">  
            <p>right</p>  
        </div>           
    </div>

CSS等高布局的方式有哪些

js  

当子元素高度不同时,进行js判断,增加较低子元素的padding-bottom,使得各个子元素实现等高效果

CSS Code复制内容到剪贴板

  1. <style>   
    body,p{margin: 0;}   
    .parent{overflow: hidden;}   
    .left,.center,.rightright{   
        float: left;   
        width: 25%;   
    }       
    .center{   
        width: 50%;   
        padding: 0 20px;   
        background-clip: content-box;   
        box-sizing: border-box;   
    }   
    </style>  
    XML/HTML Code复制内容到剪贴板
    <div class="parent" id="parent" style="background-color: lightgrey;">  
        <div class="left" style="background-color: lightblue;">  
            <p>left</p>  
        </div>     
        <div class="center" style="background-color: pink;">  
            <p>center</p>  
            <p>center</p>  
        </div>             
        <div class="right" style="background-color: lightgreen;">  
            <p>right</p>  
        </div>           
    </div>  
    JavaScript Code复制内容到剪贴板
    <script>   
    function getCSS(obj,style){   
        if(window.getComputedStyle){   
            return getComputedStyle(obj)[style];   
        }   
        return obj.currentStyle[style];   
    }   
    var oParent = document.getElementById('parent');   
    var oLeft = oParent.getElementsByTagName('div')[0];   
    var oCenter = oParent.getElementsByTagName('div')[1];   
    var oRight = oParent.getElementsByTagName('div')[2];   
    function eqHeight(obj1,obj2){   
        var oDis = obj1.clientHeight - obj2.clientHeight;   
        if(oDis > 0){   
            obj2.style.paddingBottom = parseFloat(getCSS(obj2,'padding-bottom')) + oDis + 'px';   
        }else{   
            obj1.style.paddingBottom = parseFloat(getCSS(obj1,'padding-bottom')) +  Math.abs(oDis) + 'px';   
        }   
    }   
    eqHeight(oLeft,oCenter);   
    eqHeight(oLeft,oRight);   
    </script>

CSS等高布局的方式有哪些

关于CSS等高布局的方式有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯