Tips for constraining elements to set heights according to content in "stepped" increments

Question

Tips for constraining elements to set heights according to content in "stepped" increments

Is there a way to have "step-based heights" on a div? I created a small example to illustrate my question.

My goal is to make sure that each box has a height that is a multiple of 400px. For instance, if a box with height: auto; is 345px, it should display as 400px. If the height falls between 400 and 800px, it should be set to 800px, and so forth. I have been unsuccessful in finding a solution to achieve this so far. Any suggestions?

html css

Answer 1

Answer №1

In the following example, I have created a snippet that demonstrates a simple way of maintaining equal heights for elements with a stepped height.

Todo: Modify the script to dynamically set the element or CSS instead of using fixed heights. If you want the height to be recalculated on resize, you will also need to subscribe to the resize event.

function adjustHeight () {
  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";    
  }
}

adjustHeight();


(function() {

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

  var resizeTimeout;
  function resizeThrottler() {
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        resizeHandler();

      }, 66);
    }
  }

  function resizeHandler() {
    adjustHeight();
  }

}());

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...</div>
<div>Lorem Ipsum 123 123...</div>
<div>Lorem Ipsum 123 123...</div>
</div>

If you prefer all the boxes to have equal heights, the following version calculates the height on the "wrapper" instead of looping through each element.

function adjustHeight () {
  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";
}

adjustHeight();

(function() {

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

  var resizeTimeout;
  function resizeThrottler() {
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        resizeHandler();

      }, 66);
    }
  }

  function resizeHandler() {
    adjustHeight();
  }

}());

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...</div>
<div>Lorem Ipsum 123 123...</div>
<div>Lorem Ipsum 123 123...</div>
</div>

Answer 2

In the following example, I have created a snippet that demonstrates a simple way of maintaining equal heights for elements with a stepped height.

Todo: Modify the script to dynamically set the element or CSS instead of using fixed heights. If you want the height to be recalculated on resize, you will also need to subscribe to the resize event.

function adjustHeight () {
  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";    
  }
}

adjustHeight();


(function() {

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

  var resizeTimeout;
  function resizeThrottler() {
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        resizeHandler();

      }, 66);
    }
  }

  function resizeHandler() {
    adjustHeight();
  }

}());

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...</div>
<div>Lorem Ipsum 123 123...</div>
<div>Lorem Ipsum 123 123...</div>
</div>

If you prefer all the boxes to have equal heights, the following version calculates the height on the "wrapper" instead of looping through each element.

function adjustHeight () {
  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";
}

adjustHeight();

(function() {

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

  var resizeTimeout;
  function resizeThrottler() {
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        resizeHandler();

      }, 66);
    }
  }

  function resizeHandler() {
    adjustHeight();
  }

}());

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...</div>
<div>Lorem Ipsum 123 123...</div>
<div>Lorem Ipsum 123 123...</div>
</div>

Answer 3

Answer №2

Check out this jQuery version that adjusts the height of each box to the nearest "400px step".

$('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 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 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 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 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 </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 Ipsum 123 123 Lorem Ip</div>

Answer 4

Check out this jQuery version that adjusts the height of each box to the nearest "400px step".

$('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 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 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 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 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 </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 Ipsum 123 123 Lorem Ip</div>

Tips for constraining elements to set heights according to content in "stepped" increments

Answer №1

Answer №2

Similar questions

Include category to the smallest element

Cursor or caret bleeding through overlay on Internet Explorer

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Getting the value of dynamically generated buttons when they are clicked in PHP - a simple guide

Use CSS properties to isolate and extract the logo from the Sprite image

What is the best way to incorporate the parallax effect into a v-carousel?

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

The div's height is failing to adjust based on the content it contains

exchanging the positions of two animated flipdivs

Is there a way for me to modify both the label number and text?

"jQuery enables hover effects to be applied to elements that are not directly related

What is the process for converting HTML to RTF using Java programming language?

The method models.User.fromURI is unsuccessful

Which Web Browsers Support Canvas and HTML5?

Position the image at the center above the text

What is the solution to resolving an Open Quote error message in HTML coding?

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

Utilize AJAX, PHP, and MySQL to create a search functionality that retrieves data from a MySQL database based on a dynamically generated variable

Updating the state of a React Component using data from 2 input fields

Leveraging the Xpath Contains function to locate an element with specific text content