Height Problem / Layout ???

[Jigabyte]

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!

[Jigabyte]

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 %.

[Jigabyte]

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.

    <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>

If I set the height of MasterPage_Content to 400px it works but 100% or 99.99% doesn't.

I just want it to extend with the height of the page.

Megga help needed please.

[Jigabyte]

No help from anywhere, will have to keep trying.

[brucevde]

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.

<!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 only tested this in IE7, no doubt other browser behave differently.

I am learning a lot from this website www.cssplay.co.uk. Check it out lots of info on many typical problems.

[Jigabyte]

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.

[Jigabyte]

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.