Sometimes we need to apply two or multiple <div> as they all contain same height, beside we want them responsive i.e their height will remain same if the window size changes. An example has been shown in the given image below, how they mismatch of their height when the inner contents are of different depth.
We can easily solve this problem using javaScript. But for I am going to use jQuery (a javaScript library). If you are not familiar with jQuery, be sure you get yourself familiar with it. jQuery is very easy to learn and fun to use.[jQuery - w3schools]
Different height of two <div>
We can easily solve this problem using javaScript. But for I am going to use jQuery (a javaScript library). If you are not familiar with jQuery, be sure you get yourself familiar with it. jQuery is very easy to learn and fun to use.[jQuery - w3schools]
First, we need to download jQuery file from here and add this into our html file [how to].
Next, we will give our <div> tags unique id. In our case, I will use "div_a" and "div_b" for left div and right div respectively.
Now, we will add a small script inside <head> tag. We need to consider two jQuery events. $(document).ready() for when the page loading is completed and $(window).resize() for whenever window size is changed. We will then take another function which take two div's height, check which one is largest and adjust other one's height. Ta da! We have done this!!
Both <div> has same height
Source code:
<!Doctype HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
/*works when page loading complete, this is important
because you want your divs' match height from the beginning.*/
$(document).ready(function(){
//alert("ready");
changeDivHeight();
});
/*whenever browser window size changes, this function is being called
and it fixed div height.*/
$(window).resize(function(){
//alert("resize");
changeDivHeight();
});
/*here we place our logic
we take each sizes, compares which one is largest and then
set other's height.*/
function changeDivHeight() {
// .innerHeight() returns height of an element
var a = $("#div_a").innerHeight();
var b = $("#div_b").innerHeight();
//alert(a + " " + b);
// .height() sets height of an element
// we can pass an integer value, which will be converted into px
// otherwise we can pass a string, mentioning the unit such as px or in or cm or dp
if( a > b ) {
$("#div_b").height( a );
} else {
$("#div_a").height( b );
}
}
</script>
</head>
<body width="75%" align="center">
<div id="div_a" style="border: 1px solid red; float: left; width: 30%;">
<p>hello div A hello div A hello div A hello div A hello div A hello div A.<br>div A has large height. Will div B be able to achieve same height??</p>
</div>
<div id="div_b" style="border: 1px solid green; float: left; width: 30%">
<p>hello div B<p/>
</div>
</body>
</html>Or you can use Bootstrap library to solve this problem.
No comments:
Post a Comment