0

I wrote a code to have a second div match the height of the first div. However, it doesn't work when refreshing the page. For example, if the first div has a height of 10000px, on refresh, the alerted height ranges from 5000px-8000px instead of 10000px. Keep in mind that the code below is just an example to illustrated the problem, and is not the original code. The original code retrieves data from mySQL.

<?php
include("ajaxLink.php");
?>

<style>
#totalWrap {
height: 10000px;
width: 25%;
display: inline-block;
border: 1px solid red;
}
#matchTotalWrap {
width: 25%;
display: inline-block;
border: 1px solid blue;
}
</style>

<div id = "totalWrap"></div>
<div id = "matchTotalWrap"></div>

<script>
$(function(){

var matchHeight = $("#totalWrap").height()+"px";
alert(matchHeight);
$('#matchTotalWrap').css("height",matchHeight);

});
</script>

PS: It works perfectly when you re-enter the link in the address bar.

16
  • @divy3993 I thought $(function) was a shortcut for that?
    – jessica
    Feb 11, 2016 at 3:31
  • Sorry i didn't see that you have $(function() {.....});
    – divy3993
    Feb 11, 2016 at 3:32
  • @divy3993 This only happens on refresh. Re-entering the link above in the address bar works fine every time for some reason.
    – jessica
    Feb 11, 2016 at 3:33
  • So do you get exact height or outer-height?
    – divy3993
    Feb 11, 2016 at 3:33
  • 1
    "original code retrieves data from mySQL" if you are doing an ajax request in javascript and then setting/getting the height you should include that code Feb 11, 2016 at 3:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.