前言

日常业务开发中，我们经常遇到各种等高布局，类如下图：

从页面的美观度来讲，由于每项活动详情内容不一，所以元素长短必有不同，那么如何以最高元素的height为准来设置其他元素呢？

通常我们都会用到下面几种方法：

1.利用table布局，但是这种方法最为庸烦，后期维护最为麻烦；

2.利用css3的flex布局，这种方法是最为推荐的方法，尤其是在手机端布局时，简直是万金油。不清楚的童鞋可以查看以下两个链接进行学习：

　　http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
　　http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

3.利用js动态设置元素高度，这种方法通常用在flex不能使用的情况下，PC端使用flex又是会遇到想不到的问题，例如老版IE的兼容性，所以js动态设置高度是最安全的写法，这也是本篇主要的讲点。

代码

$.fn.setEqualHeight = function (ele) {
        var maxHeight = 0, maxElement = null;
        $(ele).css({
            "height": "auto"
        });
        $(ele).each(function () {
            if (($(this).height() + parseInt($(this).css("padding-bottom")) + parseInt($(this).css("padding-top"))) > maxHeight) {
                maxHeight = $(this).height() + parseInt($(this).css("padding-top")) + parseInt($(this).css("padding-bottom"));
                maxElement = this;
            }
        });
        $(ele).not($(maxElement)).each(function () {
            $(this).height(maxHeight - parseInt($(this).css("padding-top")) - parseInt($(this).css("padding-bottom")))
        });
};

下面是示例使用方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        .equal_ul{
            overflow: hidden;
            list-style: none;
            margin-top: 10px;
        }
        .equal_item{
            width: 150px;
            padding: 10px;
            margin-right: 5px;
            border: solid 1px #000;
            float: left;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $.fn.setEqualHeight = function (ele) {
                var maxHeight = 0, maxElement = null;
                $(ele).css({
                    "height": "auto"
                });
                $(ele).each(function () {
                    if (($(this).height() + parseInt($(this).css("padding-bottom")) + parseInt($(this).css("padding-top"))) > maxHeight) {
                        maxHeight = $(this).height() + parseInt($(this).css("padding-top")) + parseInt($(this).css("padding-bottom"));
                        maxElement = this;
                    }
                });
                $(ele).not($(maxElement)).each(function () {
                    $(this).height(maxHeight - parseInt($(this).css("padding-top")) - parseInt($(this).css("padding-bottom")))
                });
            };

            $(".equal_ul").each(function () {
                $("body").setEqualHeight($(".equal_item", this));
            })
        })
    </script>
</head>
<body>
    <ul class="equal_ul">
        <li class="equal_item">
            这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
        </li>
        <li class="equal_item"></li>
        <li class="equal_item"></li>
    </ul>
    <ul class="equal_ul">
        <li class="equal_item">
            This is content.<br>
            This is content.<br>
            This is content.<br>
            This is content.<br>
        </li>
        <li class="equal_item"></li>
        <li class="equal_item"></li>
        <li class="equal_item"></li>
    </ul>
</body>
</html>

效果如下图：

$(".equal_item", this)中的this指的是当前equal_ul，如果不加this，则页面上所有的equal_item都将一样高，如下图所示：

posted on 2018-10-16 19:19 橙子橙丶阅读(328) 评论(0) 收藏举报

刷新页面返回顶部