如何基于内容将元素高度限制到特定值（“步进”） [英] How to limit element heights to specific values ("stepped") based on content

问题描述

有没有什么办法可以实现，我不能更好地描述一个div的基于高度的高度吗？我做了一点小提琴来显示我的内容。

我的目标是，每个盒子的高度都是400px的倍数。因此，如果一个包含 height：auto; 的框为345px，那么它应该是400px，如果它在400到800px之间，那么它应该是800px，依此类推。不幸的是我没有找到有用的东西来实现这一点。任何想法？

解决方案

这里我汇总了一个示例代码片断，它显示了一个非常简单的概念， / strike>，步伐高度在400,800,1200之间。

待办事项：更新脚本以动态设置元素或CSS，而不是固定高度。如果您希望重新调整大小，您还需要订阅同一个事件。

=jsdata-hide =false>

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; （）;} functionHeight（）;（function（）{window.addEventListener（resize，resizeThrottler，false）; var resizeTimeout; function resizeThrottler（）{//只要actualResizeHandler执行在队列中， resizeTimeout）{resizeTimeout = setTimeout（function（）{resizeTimeout = null; actualResizeHandler（）; // actualResizeHandler将以15fps}，66）的速率执行;}} function actualResizeHandler（）{//处理resize事件testHeight ）;}}（））;

<保证金：0; padding：0;}。wrapper {overflow：hidden; box-sizing：border-box;}。wrapper div {width：30％;保证金：5％;向左飘浮; border：1px solid #ebebeb; padding：20px;盒子尺寸：边框; height：400px;}。wrapper div：最后一个{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 

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 l / div lore 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（）{//只要actualResizeHandler执行在队列中，忽略resize事件if（！resizeTimeout）{resizeTimeout = setTimeout（function（）{resizeTimeout = null; actualResizeHandler（）; // actualResizeHandler将执行速度为15fps}，66）;}} function actualResizeHandler（）{//处理resize事件testHeight（）;}}（））;

< pre class =snippet-code-css lang-css prettyprint-override> html，body {margin：0; padding：0;}。wrapper {overflow：hidden; height：400px; box-sizing：border-box;}。wrapper div {width：30％;保证金：5％;向左飘浮; border：1px solid #bbb; padding：20px;盒子尺寸：边框; height：100％;} wrapper div：最后一个{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 

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 l / div lore 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>

Is there any way to achieve, I can't describe it better, "step-based heights" on a div? I made a little fiddle to display what I have.

My target is now, that every box has a height that's a multiple of 400px. So if a box with height: auto; would be 345px, it should be 400px, if it's between 400 and 800px it should be 800px and so on. Unfortunately I haven't found anything useful to achieve this. Any ideas?

解决方案

Here I put together a sample snippet which shows a very simple concept of keeping them equal high with a stepped height between 400, 800, 1200.

Todo: Update the script to either set the element or css dynamically instead of my fixed height. And if you want it to recalc on resize, you also need to subscribe to the very same event.

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>

If you would want all the boxes equally high, this version calc the height on the "wrapper" instead of looping each element.

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>

这篇关于如何基于内容将元素高度限制到特定值（“步进”）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！