Question

我有一个奇怪的问题，其中一些页面的中间部分没有伸展到100％的页面高度，导致没有完整的左手边框。

以下为例（请点击“布伦特伍德”链接，然后转到顶部菜单上的“登录”）https://www.inside-guides.co.uk/advertiseradmin/default.asp？

虽然“联系”页面很好（再次通过'布伦特伍德'网站）：https://www.inside-guides.co.uk/feedback.asp。

他们都使用javascript和CSS使用相同的模板，但是当我查看代码检查器时，它会为“联系人”页面上的＃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;}

非常感谢。

Answer 1

JS代码放在每页的head.css中

不确定这是否是拼写错误，但如果不是，则不能将js放在css文件中。似乎没有css文件似乎链接在你的html文档的头部。 然而，在进一步检查时，您似乎指的是headCSS.asp模板包括在哪种情况下上述要点并不重要。

对于高度100%或任何基于百分比的高度，父级必须具有已定义的高度，这使得它基本上不是非常有用，因为您无论如何都需要知道高度值。因此，如果你可以将它设置为我建议的固定高度。

答案但是我建议<table>使用单行和多列来执行您正在查看的内容，使用一个将避免大量hacky css和/或js。

使用JS不在某些页面上工作的页面高度为100％

1 个答案: