Высота div не установлена правильно

Итак, если вы откроете эту страницу в chrome http://gameittourney.fyoucon.com, вы увидите, что высота чего-то не установлена правильно, нажмите на дом и теперь, как это должно быть
Картинка для этих без хрома Как его должен выглядеть я понятия не имею, почему это происходитВысота div не установлена правильно

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"> 
      The GameIT College Tourney is a "web hub" to the different<br/> 
e-Sports tournaments hosted on Campus Djursland.<br/><br/> 
      Do you plan on making a tournament? With prizes or just for fun?<br/> 
Contact us at;<br/> 
      <a href="mailto:[email protected]" class="email">[email protected]</a><br/> 
      and we'll help you host the information and 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;"> 
       All images are the properties of their respective owners.<br> 
       Coded by Mikkel Hjortshoej © 2013 | Graphics and Design by Alexander Nass Kahr © 2013 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2013-07-31 Mikkel Hjortshøj

Это было похоже на то, что в первый раз я открыл его в Firefox, но с тех пор, как я нажал «домой», все в порядке. странно. – Optox

Я уверен, что вы можете выполнить свои стили с чистым CSS без необходимости для всего кода JavaScript –

Ну, я пробовал и ничего не работал, поэтому я сделал это с помощью jQuery –

Если я правильно понимаю проблему (окружающий div не расширяется до высоты содержимого ребенка), если вы добавляете display: block; к внутреннему классу .currentTour, вы должны быть хорошими.

.currentTour a { 
    display: block; 
}

источник

2013-07-31 21:50:08 patrickhawley

.currentTour не проблема, на других страницах появляется та же проблема –

Высота div не установлена ​​правильно

ответ

Смежные вопросы

Высота div не установлена правильно