Question

您好我有一个不同内容的三段，所以我需要的是先获取任何段落的高度，然后使所有段落的高度等于最大高度：

这里是我的简单代码：

＆＃13;

$(document).ready(function () {
    $('.my-container p').each(function (index, element) {
        alert($(this).height());
    });
})

＆＃13;

* {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
.my-container{
    width:700px;
    margin:50px auto;
    padding:20px;
}
.my-container p{
    margin: 0 0 20px;
    padding:10px;
    border:1px solid #00fb88;
}
.my-container p span{
    color:#00fb88;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
        <p>
            <span>Paragraph One</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.  Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Two</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Three</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
    </div>

＆＃13;

Answer 1

不是最好的表现，但最简单的是这样：

$(document).ready(function () {
    
    var biggestHeight = 0; // change this number to define a min-height

    // loop over every box to find the height
    $('.my-container p').each(function (index, element) {
        var currentBoxHeight = $(this).outerHeight(); // get each boxes height
        // compare the height and store as new biggest height if needed
        biggestHeight = currentBoxHeight >= biggestHeight ? currentBoxHeight : biggestHeight;
    });

    $('.my-container p').css('height', biggestHeight + 'px');
})

* {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
.my-container{
    width:700px;
    margin:50px auto;
    padding:20px;
}
.my-container p{
    margin: 0 0 20px;
    padding:10px;
    border:1px solid #00fb88;
}
.my-container p span{
    color:#00fb88;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
        <p>
            <span>Paragraph One</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.  Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Two</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Three</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
    </div>

Answer 2

使用window.getComputedStyle

style = window.getComputedStyle(element);
height = parseInt(style.height);

var maxHeight = 0;
$('.my-container p').each(function(index, element) {
  var style, height;
  style = window.getComputedStyle(element);
  height = parseInt(style.height);
  maxHeight = height >= maxHeight ? height : maxHeight;

});
$('.my-container p').css('height', maxHeight + 'px');

* {
  -moz-box-sizing: border-box !important;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

.my-container {
  width: 700px;
  margin: 50px auto;
  padding: 20px;
}

.my-container p {
  margin: 0 0 20px;
  padding: 10px;
  border: 1px solid #00fb88;
}

.my-container p span {
  color: #00fb88;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-container">

  <p>
    <span>Paragraph One</span> Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi
    eu justo tempor consectetuer tiam. Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc
    nec mi eu justo tempor consectetuer tiam.
  </p>
  <p>
    <span>Paragraph Two</span> Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi
    eu justo tempor consectetuer tiam.
  </p>
  <p>
    <span>Paragraph Three</span> Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi
    eu justo tempor consectetuer tiam.
  </p>
</div>

获得最大高度 - JQuery

2 个答案: