如何根据内容将元素高度限制为特定值（“阶梯”）答案

【问题标题】：How to limit element heights to specific values ("stepped") based on content如何根据内容将元素高度限制为特定值（“阶梯”）
【发布时间】：2016-01-18 01:39:30
【问题描述】：

有什么方法可以实现，我无法更好地描述它，“基于步长的高度”在 div 上？我做了一点fiddle 来展示我所拥有的。

我现在的目标是，每个框的高度都是 400 像素的倍数。因此，如果带有height: auto; 的框为 345px，则应为 400px，如果在 400 到 800px 之间，则应为 800px，依此类推。不幸的是，我还没有发现任何有用的东西来实现这一点。有什么想法吗？

【问题讨论】：

您可以使用jquery选择所有需要的元素，然后将它们的height css属性四舍五入为400px的倍数；
我想你需要某种 Javascript 来更新容器一旦被渲染。我认为这不能仅使用 CSS 来完成（除非您明确定义容器的高度）。
客户端脚本或服务器端类指定（如果内容已知）。
This question is being discussed on Meta.
@MichaelKunst 由于基于此 Meta 讨论提出的行动，该帖子现已回滚到其原始状态：meta.stackoverflow.com/q/308661/2827823。如果您仍想获得有关仅 html/css 解决方案的答案，我们建议您将其添加为新问题。

标签： html css

【解决方案1】：

在这里我整理了一个示例 sn-p，它显示了一个非常简单的概念，即保持它们~~相等高~~，阶梯高度~~在 400、800、1200 之间。~~p>

Todo：更新脚本以动态设置元素或 css，而不是我的固定高度。如果您希望它在调整大小时重新计算，您还需要订阅相同的事件。

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  var childrenTags = parentTag.children;
  for (var i = 0; i < childrenTags.length; i++) {
    var childTag = childrenTags[i];
    childTag.style.height = "auto";
    childTag.style.height = (Math.ceil(parseInt(childTag.clientHeight) / 400) * 400) + "px";    
  }
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
    height: 400px;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>

如果你希望所有的盒子都一样高，这个版本会计算“包装”上的高度，而不是循环每个元素。

function testHeight () {
  var scriptTag = document.scripts[document.scripts.length - 1];
  var parentTag = scriptTag.previousElementSibling;
  parentTag.style.height = "auto";
  parentTag.style.height = (Math.ceil(parseInt(parentTag.clientHeight) / 400) * 400) + "px";
}

testHeight();


(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();

        // The actualResizeHandler will execute at a rate of 15fps
      }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    testHeight();
  }

}());

html, body {
    margin: 0;
    padding: 0;
}

.wrapper {
    overflow: hidden;
    height: 400px;
    box-sizing: border-box;
}

.wrapper div {
    width: 30%;
    margin-right: 5%;
    float:left;
    border: 1px solid #bbb;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
}

.wrapper div:last-of-type {
    margin-right: 0;
}

<div class="wrapper">
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
</div>

【讨论】：

仍然不是我想要的。如果使用 javascript 完成，它应该如下所示：jsfiddle.net/rnjetmgo/2。因为在您的回答中，所有 div 的高度都相同，但对于其中 2 个，高度 400 足以包含所有内容。

【解决方案2】：

这是一个使用 jQuery 的版本，它将每个框设置为最接近的“400px 步长”高度。

$('div').each(resize);

function resize(){
    var height = $(this).css( "height" );
    var newHeight = Math.ceil(parseInt(height) / 400) * 400;
    $(this).css('height', newHeight+'px');
}

html, body {
    margin: 0;
    padding: 0;
}

div {
    width: 30%;
    margin-right: 3%;
    float: left;
    border: 1px solid #ebebeb;
    padding: 20px;
    box-sizing: border-box;
}

div:last-child {
    margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>
<div>Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ipsum 123 123 Lorem Ip</div>

【讨论】：

此答案最初由 OQA/OP 编辑到问题中，现在已被删除并作为其自己的答案正确发布在这里。