如何基于内容将元素高度限制到特定值（“步进”）

本文介绍了如何基于内容将元素高度限制到特定值（“步进”）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 有没有什么办法可以实现，我不能更好地描述一个div的基于高度的高度吗？我做了一点小提琴来显示我的内容。 我的目标是，每个盒子的高度都是400px的倍数。因此，如果一个包含 height：auto; 的框为345px，那么它应该是400px，如果它在400到800px之间，那么它应该是800px，依此类推。不幸的是我没有找到有用的东西来实现这一点。任何想法？解决方案这里我汇总了一个示例代码片断，它显示了一个非常简单的概念， / strike>，步伐高度 =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 ）;}}（））; < 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（）;}}（））; 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 with a stepped heightfunction 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> 这篇关于如何基于内容将元素高度限制到特定值（“步进”）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..