I have 2 div.
BODY
<div class="div1"></div>
<div class="div2"></div>
And I´m trying to assign to put the SAME HEIGHT to both linked to the content (dynamic content from database with PHP)
HEADER
<script>
$(document).ready(function() {
var divHeightdiv1= $(".div1").height();
var divHeightdiv2 = $(".div2").height();
if(divHeightdiv1 > divHeightdiv2)
{
$(".div2").height(divHeightdiv1);
}
else
{
$(".div1").height(divHeightdiv2);
}
});
</script>
STYLE
.div1, .div2
{
border: 1px solid black;
}
Works perfect for DESKTOP computer, but not for mobiles. Anyone knows WHY?
Note: Excuse any error product of rewriting here the code. THANKS!
You may want to give it a try with pure CSS (without using jQuery)
The HTML
<div class="layout">
<div class="rows">
<div class="column div1"></div>
<div class="column div2"></div>
</div>
</div>
The CSS
.layout {
display: table;
}
.layout .rows {
display: table-row;
}
.layout .rows .column {
display: table-cell;
border:1px solid #000;
}