StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO100% page height using JS not working on certain pages
primarykey
Id
9805871
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2012-03-21T13:43:37.333
FavoriteCount
0
LastActivityDate
2012-03-21T14:44:42.320
LastEditDate
2012-03-21T13:58:08.577
LastEditorUserId
419956
OwnerUserId
5692487
ParentId
0
PostTypeId
1
Score
0
ViewCount
162
LastEditorDisplayName
text
Body
<p>I've got a strange problem where the middle section of some of the pages aren't stretching to 100% page height, wihch results in there not being the full left hand border.</p> <p>Here for example (please click on the 'Brentwood' link and go to 'Login' on the top menu) <a href="https://www.inside-guides.co.uk/advertiseradmin/default.asp" rel="nofollow">https://www.inside-guides.co.uk/advertiseradmin/default.asp</a>?.</p> <p>Whereas the 'Contact' page is fine (again via the 'Brentwood' site): <a href="https://www.inside-guides.co.uk/feedback.asp" rel="nofollow">https://www.inside-guides.co.uk/feedback.asp</a>.</p> <p>They both use the same template using javascript and CSS, but when I look in the code inspector it gives full page height values for the #left-nav and #middle on the 'Contact'page which works.</p> <p>The javascript is to make each column the same height = i.e. to the top of the footer, but it doesn't work on the Login page.</p> <p>I really can't understand why so any help perhaps using a code inspector would be very much appreciated.</p> <p>JS code placed in the head.css on each page:</p> <pre><code><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> </code></pre> <p>Login page code where the 100% JS page height isn't working:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <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>  <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();">  <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>  </body> </html>  </code></pre> <p>CSS:</p> <pre><code>#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;} </code></pre> <p>Many thanks.</p>
Tags
<javascript><html><css>
Title
100% page height using JS not working on certain pages
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJeroen
UserOwnerUserId
1. US321
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COHave you got this in your CSS: body, html { height:100% }; ?
  singulars
  PostPostId
  PO100% page height using JS not working on certain pages
  UserUserId
  USDiodeus - James MacFarlane
2. COYep, but it doesn't work so I'm using the javascript. Any ideas? Thanks for the answer.
  singulars
  PostPostId
  PO100% page height using JS not working on certain pages
  UserUserId
  US321

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.