Anthony Jones said:
Try this:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>
The key thing is to give the html element 100% height which will give it
the
height of the viewport. From there child elements with 100% will take the
height of the parent element.
The table approach however fails in FF. The above works in IE and FF.
Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.
One last question. In googling around for the resize I notice that for both
IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance" with standards does this mean it will
stop working?
Page Markup:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" ValidateRequest="false" viewStateEncryptionMode
="Never"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<%@ Register Src="SPDWs/TSQLScript.ascx" TagName="TSQLScript"
TagPrefix="uc2" %>
<%@ Register Src="Navigator.ascx" TagName="Navigator" TagPrefix="uc1" %>
<!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" >
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body onload="SetSizes();" onresize="SetSizes()">
<script type="text/javascript">
var tp;
var cw;
var dv;
var dvc;
var wi;
function SetSizes()
{
//debugger;
dvc=document.getElementById(dv);
wi=document.body.clientWidth;
tp=wi-256-30+'px';
dvc.style.width=tp;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;
height: 100%">
<tr>
<td id="NavigatorColumn" style="vertical-align: top; width:
256px">
<uc1:Navigator id="Navigator1" runat="server">
</uc1:Navigator>
</td>
<td style="vertical-align: top; height:700px">
<cc1:TabContainer ID="ObjectContentTabs" runat="server"
ActiveTabIndex="0">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Object
Script">
<ContentTemplate>
<uc2:TSQLScript ID="TSQLScript1" runat="server"
Visible="true" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer></td>
</tr>
</table>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<span style="font-size: 7pt">.<img alt=""
src="Images/TimeClock.gif" />. Getting
Info</span>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
Web Control Markup:
<%@ Control Language="VB" AutoEventWireup="false"
CodeFile="TSQLScript.ascx.vb" Inherits="SPDWs_TSQLScript" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="ActiproSoftware.CodeHighlighter.Net20"
Namespace="ActiproSoftware.CodeHighlighter"
TagPrefix="cc1" %>
<script type="text/javascript" >
//debugger;
dv='<%=theScript.ClientID%>';
</script>
<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp
anel ID="theScript" runat="server" style="height:700px; overflow:
auto">
<pre style="text-align: left ">
<cc1:CodeHighlighter ID="CodeHighlighter1" runat="server"
LanguageKey="SQL">
</cc1:CodeHighlighter>
</pre>
</asp
anel>
<textarea id="holdtext" cols="1" rows="2" runat="server" style="display:
none"></textarea>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
