使用JS不能在某些頁面上使用JS的100％頁面高度

我有一個奇怪的問題，其中一些頁面的中間部分沒有伸展到100％的頁面高度，並且在那裏沒有充分的左手邊境。使用JS不能在某些頁面上使用JS的100％頁面高度

在這裏例如（請點擊'Brentwood'鏈接並轉到頂部菜單上的'登錄'）https://www.inside-guides.co.uk/advertiseradmin/default.asp？

鑑於'聯繫'頁面沒有問題（通過'Brentwood'網站）：https://www.inside-guides.co.uk/feedback.asp。

它們都使用相同的模板使用JavaScript和CSS，但是當我在代碼檢查器中查看時，它會在'Contact'頁面上爲＃left-nav和#middle提供完整頁面高度值。

javascript是爲了讓每列的高度相同=即頁腳的頂部，但它在登錄頁面上不起作用。

我真的不明白爲什麼所以任何可能使用代碼檢查器的幫助將非常感激。

JS代碼放置在head.css每一頁上：

<script type="text/javascript"> 
matchColumns=function(){ 
    var divs,contDivs,maxHeight,divHeight,d; 
    divs=document.getElementsByTagName('div'); 
    contDivs=[]; 
    maxHeight=0; 
    for(var i=0;i<divs.length;i++){ 
      // make collection with <div> elements with class attribute "equal" 
      if(/\bequal\b/.test(divs[i].className)){ 
       d=divs[i]; 
       contDivs[contDivs.length]=d; 
       if(d.offsetHeight){ 
        divHeight=d.offsetHeight;     
       } 
       else if(d.style.pixelHeight){ 
        divHeight=d.style.pixelHeight;     
       } 
       maxHeight=Math.max(maxHeight,divHeight); 
      } 
    } 
    for(var i=0;i<contDivs.length;i++){ 
      contDivs[i].style.height=maxHeight + "px"; 
    } 
} 
window.onload=function(){ 
    if(document.getElementsByTagName){ 
      matchColumns();    
    } 
} 
</script>

登錄頁面的代碼，其中100％JS頁面高度不工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!--#include virtual="/System/Startup_FranchiseClient.asp"--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<% 
EnsurePageIsHTTPS 
If IsFranchiseClientLoggedIn = True then 
Response.Redirect GetAdvertiserAdminHomePage 
End if 
%> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Inside-Guides.co.uk - Advertiser Login</title> 
<!--#include virtual="/Assets/Templates/Public/Franchise/HeadCSS.asp"--> 
<script type="text/javascript" src="/js/common.js"></script> 
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="/js/jquery.cycle.min.js"></script> 
</head> 
<body class="login" onload="javascript:document.getElementById('strUsername').focus();"> 
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateStart_https.asp"--> 
<div class="content clearfix"> 
<div id="form" class="form"> 
<h1>Advertiser Login</h1> 
<p>Welcome to the advertiser area. Please enter your login details below:</p> 
<span class="ErrorText"><% = strSecurity_LoginError %></span> 
<form id="form" name="LoginForm" method="post" action="Default.asp"> 
<input type="hidden" name="ValidateLogin" value="1" /> 
<label>Email 
<span class="small">Email used to register</span> 
</label> 
<input type="text" id="strUsername" name="strUsername" value="" /> 
<br /> 
<label>Password 
<span class="small">Password used to register</span> 
</label> 
<input type="password" name="strPassword" value="" /> 
<button type="submit">Log-in</button> 
<div class="spacer"></div> 
</form> 
</div> 
<p> * If you have forgotten your password, please <a href="ForgotPassword.asp">click here</a></p> 
</div> 
<!--#include virtual="/Assets/Templates/Public/Franchise/TemplateEnd.asp"--> 
</body> 
</html> 
<!--#include virtual="/System/Shutdown.asp"-->

CSS：

#middle {padding-top:7px;float:left;width:60%;border-right:1px solid #edeaec;border-left:1px solid #ede9e8;} 
#middle.dir {width:78.5%;border-right:0;}

非常感謝。

來源

2012-03-21 321

你有沒有在你的CSS：body，html {height：100％}; ？ – 2012-03-21 13:59:44

是的，但它不起作用，所以我使用的是JavaScript。有任何想法嗎？感謝你的回答。 – 321 2012-03-21 14:06:14

JS代碼放置在head.css每一頁

不知道這是一個錯字或沒有，但如果它不是你不能把JS在CSS文件上。也沒有任何CSS文件似乎被鏈接在你的HTML文檔的頭部。 但是，在進一步的檢查中，似乎您指的是headCSS.asp模板，在這種情況下，上述要點不受關注。

對於高度100%或任何百分比基於高度的家長必須有一個定義的高度，使得它本質上不是非常有用，因爲你總有需要知道的高度值。所以如果你可以將它設置爲一個固定的高度，這將是我的建議。

回答不過我建議<table>做你要找的內容與單排和多列，用一會避免很多哈克CSS和JS或的。

來源

2012-03-21 14:44:42 dennmat

使用JS不能在某些頁面上使用JS的100％頁面高度

回答

相關問題