Find Out Divs Height and Setting Div Height

Set height of div = to height of another div through .css

I am assuming that you have used height attribute at both so i am comparing it with a height
left do it with JavaScript.

var right=document.getElementById('rightdiv').style.height;
var left=document.getElementById('leftdiv').style.height;
if(left>right)
{
    document.getElementById('rightdiv').style.height=left;
}
else
{
    document.getElementById('leftdiv').style.height=right;
}

Another idea can be found here
HTML/CSS: Making two floating divs the same height.

How to set the height of divs in basic layout

You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>

Here's the fiddle

Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:

...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

How to make one div's height depended of another div's height?

To expand on my comment, you can't do it semantically. You have to use a little trick to fake the 100% height. It's called faux columns, and you can read more here.

In your case, we can fake it by adding a few background divs:

<div class="background bg1"></div>
<div class="background bg2"></div>

Then changing your CSS like so:

#wrapper {
    border: 1px solid black;
    position: relative;
}

#wrapper:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}

.block {
    position: relative;
    float: left;
    vertical-align: top;
    width: 200px;
    text-align: left;
    min-height: 200px;
    padding-left: 20px;
    z-index: 2;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 1;
}

.bg1 {
    background-color: #eee;
}

.bg2 {
    left: 200px;
    background-color: #aaa;
}​

Here's a working jsFiddle.

Get div height with plain JavaScript

var clientHeight = document.getElementById('myDiv').clientHeight;

or

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

Setting div's height according to browser height

You should be using vh for height. It also has responsive design. 1hv = 1% of the viewport height (broswer), meaning that 100vh will be the value you need ;)

Edit: If you're trying to do the same for width, you need to use vw instead of vh because vh refers to the height and vw refers to the width ;)

---

Related Topics