jquery - Height of a div not set correctly -
so if open page in chrome http://gameittourney.fyoucon.com you'll see height of 1 not set correct, press on home , how it's supposed be
picture without chrome 
how supposed 
have no idea why happening
jquery
$(document).ready(function(){ $("#maincontent").css("height", window.innerheight); $(".leftcontentborder").css("height", $("#maincontent").height()); $(".rightcontentborder").css("height", $("#maincontent").height()); var docheight = $(document).height(); var footerheight = $('#footer').height(); var footertop = $('#footer').position().top + footerheight; if (footertop < docheight) { $('#footer').css('margin-top', 10 + (docheight - footertop) + 'px'); } var mh = $(window).height(); var h = $(document).height(); if( mh < h) { $("#maincontent").css("height", h); $(".leftcontentborder").css("height", $("#maincontent").height()); $(".rightcontentborder").css("height", $("#maincontent").height()); } $(window).resize(function() { var mh = $(window).height(); var h = $(document).height(); if( mh < h) { $("#maincontent").css("height", h); $(".leftcontentborder").css("height", $("#maincontent").height()); $(".rightcontentborder").css("height", $("#maincontent").height()); } else { $("#maincontent").css("height", window.innerheight); $(".leftcontentborder").css("height", $("#maincontent").height()); $(".rightcontentborder").css("height", $("#maincontent").height()); } var docheight = $(document).height(); var footerheight = $('#footer').height(); var footertop = $('#footer').position().top + footerheight; if (footertop < docheight) { $('#footer').css('margin-top', (docheight - footertop) + 'px'); } }); }); html
<!doctype html> <html> <head> <link rel="stylesheet" href="stylesheet.css" type="text/css"> <meta charset="utf-8"> <meta http-equiv="cache-control" content="no-cache"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="resize.js" type="text/jscript"></script> <title>gameit tourney</title> <style type="text/css"> </style> </head> <body> <div id="contentbox"> <div class="leftcontentborder"></div> <div class="rightcontentborder"></div> <div id="maincontent"> <div class="header"><a href="/"><img src="img/campusdjursland_tourneyhjemmeside_grafik/resten/header_img.png" /></a></div> <div class="navbar"> <ul> <a href="/"><li>home</li></a> <a href="/"><li>about</li></a> <a href="/"><li>contact</li></a> </ul> </div> <div class="info"> gameit college tourney "web hub" different<br/> e-sports tournaments hosted on campus djursland.<br/><br/> plan on making tournament? prizes or fun?<br/> contact at;<br/> <a href="mailto:campusdjurslandtourney@fyoucon.com" class="email">campusdjurslandtourney@fyoucon.com</a><br/> , we'll host information , register participants. </div> <div class="dividelinebig"></div> <div class="currenttour"> <div class="titel"><img src="img/campusdjursland_tourneyhjemmeside_grafik/resten/right_arrow.png"/> current tournaments <img src="img/campusdjursland_tourneyhjemmeside_grafik/resten/left_arrow.png"/> <div class="dividelinesmall"></div> </div> <a href="/"><img class="imagecenter" src="img/lolt.png"/></a> </div> <div class="dividelinebig"></div> <div class="currenttour" style="background-color:#e1e1e1;"> <div class="titel"><img src="img/campusdjursland_tourneyhjemmeside_grafik/resten/past_pil_right.png"/> past tournaments <img src="img/campusdjursland_tourneyhjemmeside_grafik/resten/past_pil_left.png"/> <div class="dividelinesmall"></div> </div> <a href="/"><img class="imagecenter" src="img/lolt.png"/></a> </div> <div id="footer"> <img class="imagecenter" src="img/campusdjursland_tourneyhjemmeside_grafik/footer/footer_divideline.png"/> <div style="padding: 5px 5px 5px 5px;"> images properties of respective owners.<br> coded mikkel hjortshoej © 2013 | graphics , design alexander nass kahr © 2013 </div> </div> </div> </div> </body> </html>
if understand yor problem correctly (the surrounding div not expanding height of child content), if add display:block; inside of .currenttour class, should good.
.currenttour { display: block; }
Comments
Post a Comment