Start Free Trial

asked on

DIV 100% height not fillng page in ASP.NET

Title says it all really. I've switched a website I was developing from Java to ASP after going on a course recently. However the CSS that I carried over doesn't seem to work the same, and a DIV that I have set to 100% height using a CSS class is not sizing to 100%, it's sizing to whatever the contents are. The only difference is I'm using . and the class attribute instead of # and the id attribute.

CSS and relevant ASP code shown, I'm doing this on a Master page although I don't expect that to make any difference?

Thanks
B

CSS:
	.shortmenu {
		background: #007080;
		float: left;
		width: 180px;
		height: 100%;
		padding: 6px 6px;
		font-size: 0.9em;
		border-left: 5px solid white;
		font-size: 12px; 
		font-family: verdana; 
		color: white;
	}
 
ASP:
<body>
    <form id="form1" runat="server">
    <div class="container">
		<div class="header">
			<img src="Logo_small.jpg" alt="Leagues Ahead" /><br />
		</div> 
        <div class="shortmenu">
			<br />
			<asp:Login ID="lgnMain" runat="server" BorderPadding="0" BorderStyle="None" BorderWidth="0px" Font-Names="Verdana" Font-Size="10pt" LoginButtonText="Log in" PasswordLabelText="Password" PasswordRequiredErrorMessage="Password is required" RememberMeText="Remember me" TitleText="You are not logged in" UserNameLabelText="Username" UserNameRequiredErrorMessage="Username is required">
				<TitleTextStyle CssClass="login" Font-Bold="True" HorizontalAlign="Left" />
				<CheckBoxStyle CssClass="login" HorizontalAlign="Left" />
				<TextBoxStyle Width="75pt" />
				<LoginButtonStyle CssClass="login" Font-Bold="True" />
				<LabelStyle CssClass="login" />
				<FailureTextStyle CssClass="login" />
			</asp:Login>
        </div>
        <div class="headmenu">
        </div>
        <div id="divMain" class="content">
			<asp:contentplaceholder id="placeholder" runat="server">
			</asp:contentplaceholder>
		</div>
		<div class="footer">
		</div>
    </div>
    </form>
</body>

Open in new window

This should help you :)

http://css-discuss.incutio.com/?page=HundredPercentHeight

did you change browsers as well?
for the most part, changing app code shouldn't alter the way CSS renders, but browsers might.

Also, your shortmenu div is inside a div called "container" how tall is the height on the "container" class? The 100% height means 100% of the item its inside, not necessarily the page or the screen. Embedded like it is, your "shortmenu" is only reaching 100% of the height of the "container"

ASKER

Ruscal, that doesn't explain why the div is only sizing to fit content though, it's not sizing to fit the container DIV. Anyway, the container DIV is also set to 100% - and the CSS worked in my Java project. And no, I didn't change browsers. The only thing I changed was using a .container class instead of #container ID (same for shortmenu).

Lotok, not sure which bit you meant in particular, but I tried doing the min-height thing and it had no effect at all.

Under your body tag i added a div which wraps around all your contend and forces the height and the bg color.

<body>
<div style="height:100%;background-color:#FF4444;">
    <form id="form1" runat="server">
    <div class="container">
		<div class="header">
			<img src="Logo_small.jpg" alt="Leagues Ahead" /><br />
		</div> 
        <div class="shortmenu">
			<br />
			<asp:Login ID="lgnMain" runat="server" BorderPadding="0" BorderStyle="None" BorderWidth="0px" Font-Names="Verdana" Font-Size="10pt" LoginButtonText="Log in" PasswordLabelText="Password" PasswordRequiredErrorMessage="Password is required" RememberMeText="Remember me" TitleText="You are not logged in" UserNameLabelText="Username" UserNameRequiredErrorMessage="Username is required">
				<TitleTextStyle CssClass="login" Font-Bold="True" HorizontalAlign="Left" />
				<CheckBoxStyle CssClass="login" HorizontalAlign="Left" />
				<TextBoxStyle Width="75pt" />
				<LoginButtonStyle CssClass="login" Font-Bold="True" />
				<LabelStyle CssClass="login" />
				<FailureTextStyle CssClass="login" />
			</asp:Login>
        </div>
        <div class="headmenu">
        </div>
        <div id="divMain" class="content">
			<asp:contentplaceholder id="placeholder" runat="server">
			</asp:contentplaceholder>
		</div>
		<div class="footer">
		</div>
    </div>
    </form>
</div>
</body>

Open in new window

ASKER

but isn't that what the container class is there for? putting styles in the html isn't good practice...

What Ruscal was getting at is your div *IS* 100% of the container div and the container div gets bigger when content is added.
As I showed above if you add a Div at top level, not inside other divs, it will work.

You dont need to use in-line styles though, that was just an example. You can create a class with that same result.

ASKER

but i already have a class that does that, the container class...! i don't understand what putting another wrapper there achieves when there's already a wrapper there

You havent shown your CSS for that container class. I was just showing you in the example that if the container has the height:100%; it works. the problem you are having is caused by the div being in another div.

Currently you have shown us your shortmenu class with 100% height, but the div that class relates to is embedded.

ASKER

See my first comment this morning: "Anyway, the container DIV is also set to 100% - and the CSS worked in my Java project."

I just tried moving the DIV outside the <form> tags as well but that had no effect.

	.container {
		width:1024px;
		height:100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

Open in new window

ASKER

I just put height: 100% in the BODY style as well but that didn't have any effect either.

Do you have a seperate CSS file or is this in the header?
can you post your entire file(s) so I can have a look?

ASKER

Separate CSS:

	A {text-decoration: none;}
	A:hover {text-decoration: underline;}
	A:visited {color: black;}
	A.shortmenu_content:visited {color: white;}
	.normal {font-size: 12px; font-family: verdana; color: black}
	.detail {font-size: 12px; font-family: verdana; color: #508806}
	BODY {
		font-size: 14px; 
		font-family: verdana; 
		background-color: #EEEEEE; 
		background-position: center;
		margin: 0;
		text-align: center; 
		height: 100%
	}	
	.container {
		width:1024px;
		height:100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	.header {
		background: white;
		width: 1024px;
		height: 125px;
	}
	.shortmenu {
		background: #007080;
		float: left;
		width: 180px;
		height: 100%;
		padding: 6px 6px;
		border-left: 5px solid white;
		font-size: 12px;
		font-family: verdana; 
		color: white;
	}
	.shortmenu_content 
	{
		font-size: 13px;
		font-family: verdana; 
		color: white;
	}
	.headmenu {
		background: #508806;
		float: left;
		width: 809px;
		height: 25px;
		padding: 6px 6px;
		border-left: 1px solid white;
		border-right: 5px solid white;
		font-size: 0.8em;
		font-weight: bold;
		color: white;
	}
	.content {
		background: #fff;
		float: left;
		width: 817px;
		height: 100%;
		border: 5px solid white;
	}
	.shortmenu_filler {
		background: #007080;
		float: left;
		width: 150px;
		height: 25px;
		border-left: 5px solid white;
	}
	.footer {
		background: #106070;
		width: 1014px;
		height: 35px;
		border: 5px solid white;
	}

Open in new window

This works.

<html>
<head>
<style>
A {text-decoration: none;}
	A:hover {text-decoration: underline;}
	A:visited {color: black;}
	A.shortmenu_content:visited {color: white;}
	.normal {font-size: 12px; font-family: verdana; color: black}
	.detail {font-size: 12px; font-family: verdana; color: #508806}
 
	BODY {
		font-size: 14px; 
		font-family: verdana; 
		background-color: #EEEEEE; 
		background-position: center;
		margin: 0;
		text-align: center; 
		height: 100%
	}	
	.container {
		width:1024px;
		background-color:FF4444;
		Height:100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
 
 
	}
	.header {
		background: white;
		width: 1024px;
		height: 125px;
	}
	.shortmenu {
		background: #007080;
		float: left;
		width: 180px;
		padding: 6px 6px;
		border-left: 5px solid white;
		font-size: 12px;
		font-family: verdana; 
		color: white;
	}
	.shortmenu_content 
	{
		font-size: 13px;
		font-family: verdana; 
		color: white;
	}
	.headmenu {
		background: #508806;
		float: left;
		width: 809px;
		height: 25px;
		padding: 6px 6px;
		border-left: 1px solid white;
		border-right: 5px solid white;
		font-size: 0.8em;
		font-weight: bold;
		color: white;
	}
	.content {
		background: #fff;
		float: left;
		width: 817px;
		border: 5px solid white;
	}
	.shortmenu_filler {
		background: #007080;
		float: left;
		width: 150px;
		height: 25px;
		border-left: 5px solid white;
	}
	.footer {
		background: #106070;
		width: 1014px;
		height: 35px;
		border: 5px solid white;
	} 
</style>
</head>
<body>
    <div class="container" >
    <form id="form1" runat="server">
 
		<div class="header">
			<img src="Logo_small.jpg" alt="Leagues Ahead" /><br />
		</div> 
        <div class="shortmenu">
			<br />
			<asp:Login ID="lgnMain" runat="server" BorderPadding="0" BorderStyle="None" BorderWidth="0px" Font-Names="Verdana" Font-Size="10pt" LoginButtonText="Log in" PasswordLabelText="Password" PasswordRequiredErrorMessage="Password is required" RememberMeText="Remember me" TitleText="You are not logged in" UserNameLabelText="Username" UserNameRequiredErrorMessage="Username is required">
				<TitleTextStyle CssClass="login" Font-Bold="True" HorizontalAlign="Left" />
				<CheckBoxStyle CssClass="login" HorizontalAlign="Left" />
				<TextBoxStyle Width="75pt" />
				<LoginButtonStyle CssClass="login" Font-Bold="True" />
				<LabelStyle CssClass="login" />
				<FailureTextStyle CssClass="login" />
			</asp:Login>
        </div>
        <div class="headmenu">
        </div>
        <div class="content">
			<asp:contentplaceholder id="placeholder" runat="server">
			</asp:contentplaceholder>
		</div>
		<div class="footer">
		</div>
      </form>
</div>
 
</body>
</html>

Open in new window

ASKER

What have you done, just copied and pasted the CSS into the header style? Or did you change anything?

Actually I recreated the container class both in the markup and CSS.
I created it with an inline style so it worked then one by one moved the styles in to the class.

I can only imagine an error has appeared during your copy and pasting to transform it from the old java project.

ASKER

This still ain't doing it. If I set the container height to 2000px, lo and behold, it's 2000px. But set it back to 100% and it just doesn't like it, whether it's in the head or in the linked CSS. I even copy and pasted the above code straight into a new HTML form within Visual Studio and it still didn't work.

I'm just in the middle of downloading Firefox to try it on that in case it's my browser but nothing's changed about my browser (IE7)...

It works here for IE7 and FF

ASKER

Firefox is even worse - it doesn't display the footer DIV, and the shortmenu is still the same size.

Are you using ASP.NET on Visual Studio?

I use VS2005 but for writing that I just used notepad+
Will have a look in vs2005, 2 mins

Bloody heck!
Just noticed your body tag is upper case.
DOH!

CSS is case sensitive.
Works now.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
 
<!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>
<title>Test</title>
<style type="text/css">
A {text-decoration: none;}
	A:hover {text-decoration: underline;}
	A:visited {color: black;}
	A.shortmenu_content:visited {color: white;}
	.normal {font-size: 12px; font-family: verdana; color: black}
	.detail {font-size: 12px; font-family: verdana; color: #508806}
 
body {height:100%; background-color:#FF4444;min-height:100%;}	
	.container {
		width:1024px;
		background-color:FF4444;
		Height:100%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	.header {
		background: white;
		width: 1024px;
		height: 125px;
	}
	.shortmenu {
		background: #007080;
		float: left;
		width: 180px;
		padding: 6px 6px;
		border-left: 5px solid white;
		font-size: 12px;
		font-family: verdana; 
		color: white;
	}
	.shortmenu_content 
	{
		font-size: 13px;
		font-family: verdana; 
		color: white;
	}
	.headmenu {
		background: #508806;
		float: left;
		width: 809px;
		height: 25px;
		padding: 6px 6px;
		border-left: 1px solid white;
		border-right: 5px solid white;
		font-size: 0.8em;
		font-weight: bold;
		color: white;
	}
	.content {
		background: #fff;
		float: left;
		width: 817px;
		border: 5px solid white;
	}
	.shortmenu_filler {
		background: #007080;
		float: left;
		width: 150px;
		height: 25px;
		border-left: 5px solid white;
	}
	.footer {
		background: #106070;
		width: 1014px;
		height: 35px;
		border: 5px solid white;
	} 
</style>
</head>
<body style="">
    <div>
    <form id="form1" runat="server">
 
		<div class="header">
			<img src="Logo_small.jpg" alt="Leagues Ahead" /><br />
		</div> 
        <div class="shortmenu">
			<br />
			<asp:Login ID="lgnMain" runat="server" BorderPadding="0" BorderStyle="None" BorderWidth="0px" Font-Names="Verdana" Font-Size="10pt" LoginButtonText="Log in" PasswordLabelText="Password" PasswordRequiredErrorMessage="Password is required" RememberMeText="Remember me" TitleText="You are not logged in" UserNameLabelText="Username" UserNameRequiredErrorMessage="Username is required">
				<TitleTextStyle CssClass="login" Font-Bold="True" HorizontalAlign="Left" />
				<CheckBoxStyle CssClass="login" HorizontalAlign="Left" />
				<TextBoxStyle Width="75pt" />
				<LoginButtonStyle CssClass="login" Font-Bold="True" />
				<LabelStyle CssClass="login" />
				<FailureTextStyle CssClass="login" />
			</asp:Login>
        </div>
        <div class="headmenu">
        </div>
        <div class="content">
 
		</div>
		<div class="footer">
		</div>
      </form>
</div>
 
</body>
</html>

Open in new window

ASKER

Well I'm astonished that VS didn't pick up on that.

Didn't make any difference though, unfortunately... it now says
      body {
            font-size: 14px;
            font-family: verdana;
            background-color: #EEEEEE;
            background-position: center;
            margin: 0;
            text-align: center;
            height: 100%
      }

Didn't work in either the html or in the css/aspx...

ASKER

oops just noticed the min-height thing will just check that

ASKER

no, no difference

Copy what I attached and paste it into a new webform
I removed the content area as I wasnt testing with a master page, just a standalone page
works for me.

ASKER

Not for me. See attached.
default.bmp

ASKER

you know i think i'm going to have to work with fixed widths and heights instead, i just noticed the right DIVs jump underneath the shortmenu DIV if I narrow the browser beyond the edge of the page : (

i guess i can come up with some code to programmatically size the DIVs based on their content...

I reckon all that needs to be done here is re-write the markup/CSS.
It is not a big document so wouldnt take long. I will post some markup here from one I am currently working on myself which infact has a 99.95% height. Hopefully it will help you when you re-write this. i think there is just an elusive error in there to be honest.

I have used a couple of IDs for main sections however easy enough to make them classes.

---Master Page --
 
<%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Main" %>
 
<!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>IT Support Utilities</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="wrapper">
   
   <div id="header">
   <div class="logo">
       <asp:HyperLink ID="hlLogo" runat="server" NavigateUrl="~/index.aspx" ImageUrl="~/_images/logo.jpg"></asp:HyperLink>
   </div>   
    </div>
    
    <div id="content">
    <div class="sitemap">
            <asp:SiteMapPath ID="smp_1" runat="server" CssClass="font">
        </asp:SiteMapPath>
    </div>
 
        <asp:ContentPlaceHolder ID="cphMain" runat="server">
        </asp:ContentPlaceHolder>
        
    </div>
           
    </div>
    
    <div id="footer">
    <!-- footer -->
    </div>
     
    </form>
</body>
</html>
 
--Layout CSS Page--
 
 
html, body {margin:0 0; padding:0 0; height:100%;}
 
 
#wrapper {width:830px; min-height:99.5%; min-width:800px; margin-left:auto; margin-right:auto; border-left:solid 1px #596F80;border-right:solid 1px #596F80;}
#header {width:inherit; min-height:99.5%; border-bottom:solid 1px #596F80;}
#footer {width:830px; min-height:5px; max-height:5px; margin-left:auto; margin-right:auto;border-left:solid 1px #596F80;border-right:solid 1px #596F80;}
 
 
.logo {width:80px; height:80px;}
.clear {clear:both;}
.sitemap {float:left; margin:0 10px;}
.content {margin:10px 10px;}

Open in new window

ASKER

Yeah but you reckon this is working for you... so it must be something peculiar to my environment as I copied your code verbatim...

copy and paste my code and see if it works for you.

ASKER

I did, hence "I copied your code verbatim..." - that's what's confusing me, I don't see how it can work for you and then not for me.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Yours isn't quite the same, it's just a header, main and footer, doesn't have floating sections in the middle so it's not really comparable. Tried it in VS2005 and it did what it does but it doesn't really tell us much.

I will try writing something simple from scratch and seeing if I can get it to work. Won't be today though.

No worries, i tend to check here every day unless i am really really busy :)

Thanks for picking this up Lotok, I've been out all day and didn't get to check back in.

I looked through your posts and didn't see anything glaring at me other than the case sensitivity issue, and you brought it up a cople posts after I saw it, so I think we're all good there.

I'm just failing to see the same little error that must be in there somewhere... i dunno, but I'll keep looking and monitoring though.

Yea I couldnt see the error either, but it must be there. It is a small snippet of markup so re-writing it shouldnt take long.

ASKER

This ceased being a problem, appreciate the efforts so will award the points rather than have the Q deleted. Would still like to know what the issue was but time is in short supply so won't pursue this any further.

Thanks
B

I actually found the solution.
For some reason it doesn't work in asp sometimes if the form tag doesn't get a height value of 100%.

<body>
    <form id="form1" style="height:100%" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div id="wrapper">
...

Open in new window

ASKER

helge, thanks for that, I'll assume you're right as I don't have chance to test this now, however if I come across the same again in future I'll come back and look at this and I'll award some additional points if it does prove to solve the problem.

Thanks again
B