Determine Maximum Possible Div Height

Determine Maximum Possible DIV Height

This is your code, modified to use binary search (so it's much quicker).

http://jsfiddle.net/thai/zkuGv/4/

It begins at 1 pixel and doubling its size until the it hits the maximum (I use 2⁵³, which is the biggest integer that can be stored in JavaScript without losing precision and would make the binary search buggy), or the div collapses to zero pixel.

Suppose we set the div to size h and it disappears, then the maximum size must be between h/2 and h. We binary search from there for a height h that does not make the div disappear when set to height h, but disappears when set to h+1.

Then we can come to a conclusion for Opera: 2147483583 pixels.

Make div height the max-height of container div

Set the parent's display property to flex, and the flex direction to column:

#parent {  display: flex;  flex-direction: column;  max-height: 100px;  border-bottom: 2px solid red; /** example - to show the effect on the parent **/}
#child {  height: 100vh;  background: blue;}

<div id="parent">  <div id="child">  </div></div>

How to get the maximum possible width of a div?

A couple ways to do this, let's start with your div...

<div id='mr_cleaver'>
  <div id='beaver'>Blah</div>
</div>

...and then someJavascript:

//Method One: Find the width of the div's parent
var max_beaver_width = $('mr_cleaver').offsetWidth

//Method Two: Max out the div, find length, return to original size.
var beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = "100%";
var max_beaver_width = $('beaver').offsetWidth;
$('beaver').style.width = beaver_width + 'px';

//Method Three: Check for overflow
$('beaver').scrollWidth > $('beaver').offsetWidth ? alert("Over") : alert("Within")

element with the max height from a set of elements

Use .map() and Math.max.

var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());

---

If that's confusing to read, this might be clearer:

var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get();

maxHeight = Math.max.apply(null, heights);

Attaining the maximum possible height for a fixed element between two other fixed elements

As I said in my comment, you can't flow around fixed or absolutely-positioned elements. One approach might be to use an absolutely-positioned div with the same top and bottom dimensions as the heights of your #header and #footer:

http://jsfiddle.net/G3k54/2

html, body {
    position:fixed;
    height:100%;
    width:100%;
}
#header {
    position:fixed;
    top:0;
    width:100%;
    height:30px;
}
#footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:20px;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 25px;
    width: 100%;
}

Find max height of div by dynamic content in javascript

You can try this:-

$(document).ready(function() {
  var maxHeight = -1;

  $('.cat-product-name').each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight :     $(this).height();
 });

 $('.cat-product-name').each(function() {
   $(this).height(maxHeight);
 });
});

Reference - Use jQuery/CSS to find the tallest of all elements

How to set up an element with max-height so that the elements inside it will take the available space evenly (See description)

If you do not specify height on container then it's initial value is auto. Auto means it's height is determined by it's children. So height will always be equal to it's content height.

max-height is not same as height, it is applied after height is calculated ref. Setting max-height doesn't mean you are setting height also. You are just clipping the element height.

Your case 2 and 3 demands children to be dependent on parent containers height. But the container's height is dependent on the children. That is why you'll need javascript to implement case 2 and 3.

---

In case if you decide to have fixed height to the container then you can use grid with auto-fit templet-rows to achieve all the test cases using pure CSS:

//the script is used only for increasing content heights for the demo
var c1, c2;
var r1, r2;

document.addEventListener('DOMContentLoaded', init);

function init() {
  c1 = document.getElementById('c1');
  c2 = document.getElementById('c2');

  r1 = document.getElementById('r1');
  r2 = document.getElementById('r2');

  r1.addEventListener('change', update1);
  r2.addEventListener('change', update2);

  update1();
  update2();
}

function update1() {
  c1.style.height = r1.value + 'px';
  c1.innerText = 'Content Height: ' + r1.value + 'px';
}

function update2() {
  c2.style.height = r2.value + 'px';
  c2.innerText = 'Content Height: ' + r2.value + 'px';
}

* {
  box-sizing: border-box;
}

.container {
  height: 200px;
  border: 2px solid;
  background-color: lemonchiffon;

  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(0, min-content));
}

.container>div {
  border: 1px dashed gray;
  overflow: auto;
  height: fit-content;
  max-height: 100%;
}

.inner-element:nth-child(1) {
  background: lightgreen;
}

.inner-element:nth-child(2) {
  background: lightblue;
}

<div>
  <label for="r1">Element one height: 0</label>
  <input type="range" id="r1" name="r1" min="0" max="400" value="50">400
</div>
<div>
  <label for="height2">Element two height: 0</label>
  <input type="range" id="r2" name="r2" min="0" max="400" value="50">400
</div>

<div class="container">
  <div class="inner-element">
    <div id=c1></div>
  </div>
  <div class="inner-element">
    <div id=c2></div>
  </div>
</div>

---

Related Topics