Avatar of Belazir
Belazir
 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

ASP.NETCSS

Avatar of undefined
Last Comment
Belazir

8/22/2022 - Mon
Lotok

Ruscal

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

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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Lotok

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

Belazir

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

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Lotok

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

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
Lotok

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.

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Belazir

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

Belazir

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

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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Belazir

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

Lotok

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

Belazir

ASKER
What have you done, just copied and pasted the CSS into the header style?  Or did you change anything?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Lotok

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

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)...
Lotok

It works here for IE7 and FF
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Belazir

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

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

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Belazir

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

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

ASKER
no, no difference
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Lotok

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

ASKER
Not for me.  See attached.
default.bmp
Belazir

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...
Your help has saved me hundreds of hours of internet surfing.
fblack61
Lotok

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

Belazir

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

copy and paste my code and see if it works for you.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Belazir

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
Lotok

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Belazir

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

No worries, i tend to check here every day unless i am really really busy :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Ruscal

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

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

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
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
helgesteffen

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

Belazir

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