Printable View
Hello Everyone,
I have a website which has a master page and content page. The website is being created dynamically. My problem is I need first of all for my body to use 100% but in doing this I end up with a vertical scrollbar. I then have a div called container which I set the height to 100%. This works fine. I just need my body to fill the screen without scrollbars.
Any ideas please,
Jiggy!
Okay I have managed to get the height correct for my container. I set the height to 99.99%. How do you get divs to stretch to the max height. What I mean is I need my container div to be 100%. Do I need to set the container controls height to 100% first and if so how do I do this. It seems to ignore the height set as %.
Here is my code. The MasterPage_Contents height is being ignored when I set it to a percent value which then all the other controls heights fail because !00% of 0 is 0.
If I set the height of MasterPage_Content to 400px it works but 100% or 99.99% doesn't.Code:<div id="Container">
<div id="MasterPage_Header">
<asp:Image ID="imgLogo" runat="server" Height="82px" Width="140px" style="float:left; margin-left: 5px;" ImageUrl="~/Images/H-holchem logo.jpg"/>
<asp:Image ID="imgHeader1" runat="server" Height="82px" Width="794px" ImageUrl="~/Header_Images/H-header image.jpg" />
<div style="width: 935px; height: 26px; float:left; margin-left:5px; background-color: #002862;">
<asp:Image ID="Image1" runat="server" Height="26px" Width="160px" style="margin-left:5px; float:left;" ImageUrl="~/Images/H-top strip-left.jpg"/>
<asp:Image ID="Image2" runat="server" Height="26px" Width="514px" ImageUrl="~/Images/H-top strip-right.jpg"/>
<asp:Label ID="lblPageTitle" runat="server" style="position:absolute; left:174px; top:89px; color:White;" Font-Names="Verdana" Font-Bold="true" Text="HOME / NEWS"></asp:Label>
<asp:TextBox ID="txtSearch" runat="server" style="position:absolute; left:720px; top:87px; width:160px;" Font-Size="Small" Height="15px" ></asp:TextBox>
<asp:Button ID="butSearch" runat="server" style="position:absolute; left:895px; top:87px;" Height="20px" Text="Search" ToolTip="Search this website." Width="66px" Font-Names="Verdana" Font-Size="10pt" />
</div>
</div>
<div id="MasterPage_Menu" style="float:left; margin-left:5px;">
<asp:ImageButton ID="butHome" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-homeNews-1.gif" />
<asp:ImageButton ID="butAbout" runat="server" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-about-1.gif" />
<asp:ImageButton ID="butContactUs" runat="server" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-contact-1.gif" />
<asp:ImageButton ID="butVacancies" runat="server" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-careers-1.gif" />
<asp:ImageButton ID="ImageButton1" runat="server" Height="20px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Spacer-20x140px.gif" />
<asp:ImageButton ID="butFood" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-foodproc-1.gif" />
<asp:ImageButton ID="butBevDairy" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-bevdairy-1.gif" />
<asp:ImageButton ID="butCatHosp" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-catering hosp-1.gif" />
<asp:ImageButton ID="butEquipment" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Menu-equipment-1.gif" />
<asp:ImageButton ID="ImageButton3" runat="server" style="float:left;" Height="28px" Width="140px" CausesValidation="False" ImageUrl="~/Images/Spacer-28x140px.gif" />
<div id="Login_Main" runat="server" style="float:left;" >
<asp:Login ID="Login" runat="server" BackColor="#E3EAEB" BorderColor="#E6E2D8" BorderPadding="4"
BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#333333" DisplayRememberMe="False" FailureText="Login Failed!" Height="64px" PasswordRequiredErrorMessage="Password required." RememberMeText="" UserNameRequiredErrorMessage="User Name required." TextLayout="TextOnTop" Width="128px">
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BackColor="White" BorderColor="#C5BBAF" BorderStyle="Solid" BorderWidth="1px"
Font-Names="Verdana" Font-Size="0.8em" ForeColor="Navy" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TitleTextStyle BackColor="#002862" Font-Bold="True" Font-Size="0.9em" ForeColor="White" BorderColor="Black" />
</asp:Login>
</div>
</div>
<div id="MasterPage_Header_2">
<table id="Table1" style="z-index: 100; width: 794px; height: 18px">
<tr>
<td><asp:SiteMapPath ID="SiteMapPath" runat="server" >
</asp:SiteMapPath> </td>
</tr>
</table>
<table id="tickerAnchor" style="z-index: 100; width: 794px; height: 18px">
<tr>
<td style="width: 54px; height: 18px;">
<b>LATEST:</b></td>
<td style="width: 700px; color: #565656; font-size: 10pt; vertical-align: middle; text-align: left; height: 18px;" id="ticker"></td>
</tr>
</table>
</div>
<div id="MasterPage_Content">
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
I just want it to extend with the height of the page.
Megga help needed please.
No help from anywhere, will have to keep trying.
There are a few gotchas when trying to use height=% and creating fixed sized page layouts. Using the sample html snippet.
Height is not inherited. When using % make sure all parent elements have a specific height (% or pixels). This includes the HTML tag. Remove the height:100%; from the Body style affects the heights of the two divs that use %;
Understand the Box Model. The Height style means the size of an element's content. An Element has an overall height which is calculated as margin top + size of top border + padding top + height + padding bottom + size of bottom border + margin bottom. The same applies for the Width style.
Use the overflow style. The Content div (pink) over flows the Container because it's overall height is 100% + 50px (margins) and because it starts about 200px down. This causes the browser to show Scrollbars. Adding overflow:hidden; to the Container styles, removes the browser scrollbars and everything stays within the Container div but of course some Content may not be shown.
I only tested this in IE7, no doubt other browser behave differently.HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
html{height:100%;}
body{
margin:0;
padding:0;
background-color:silver;
height:100%;
}
#Container{height:100%;width:80%;margin:0 auto;background-color:white;}
#Header{height:90px;background-color:orange;margin:5px;}
#Menu{height:90px;background-color:aqua;margin:5px;}
#Content{height:100%;background-color:pink;margin:25px;}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
Header Div
</div>
<div id="Menu">
Menu Div
</div>
<div id="Content">
Content Div
</div>
</div>
</body>
</html>
I am learning a lot from this website www.cssplay.co.uk. Check it out lots of info on many typical problems.
Thanks very much mate. I thought if I had the outer divs height set to 100% and had to divs inside that div and set them to 100% it would will the div 50 / 50.
That didn't work for me mate, the pink went passed the full screen. My menu is on the left side, how do I get it to grow. My content will be larger than the view window sometimes and I want the menu to grow with it.