CSS 100% height vs showing content

I found a three column liqued css style which on the whole I'm almost satisfied with .......
you can see the html part in spippet 8241497 and the css in 8241499.

the problem is:

in the colmask class you find the line height:95%; ........ wich works nicely when there is not enough content to fill out the page. it fills out the page ...... however when t here is more content than fits on the screen. this content is not shown. (also no scrollbars)

when I change the line in question to min-heigt:95%, the content is shown, with scrollbars and background color and all. but when there isn't enough content. the divs don't stretch to the screen size any more as well.

any idead, suggestion are welcome,

thnx....

<!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-GB">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>

<div id="header">

</div>
<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1" style="background:#FFF;">
				<!-- Column 1 start -->
				
				<!-- Column 1 end -->
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				
				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
			
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>


</body>
</html>

Open in new window

html {
	height: 100%;
}

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	font-size:90%;
	height: 100%;
}


/* Header styles */
#header {
	position:fixed;
	_position:absolute;
	top:0;
	_top:expression(eval(document.body.scrollTop));
	left:0;
	margin:0;
	padding:0;
	background:lime;
	width:100%;
	background:#FF0;
	height:5%;
	z-index:100;
}

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	top:31px;
	float:left;
	width:85%;			/* width of whole page */
	top:5%;
	height:95%;
	margin-left: 10%;
    margin-right: 5%;
	overflow:hidden;
	z-index:10;
	/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
	height:100%;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */

	min-height:100%;
}

/* 3 Column settings */
.threecol {
	background:red;		/* right column background colour */
	
}
.threecol .colmid {
	right:32%;			/* width of the right column */
	
	background:green;		/* center column background colour */
}
.threecol .colleft {
	right:50%;			/* width of the middle column */
	background:blue;	/* left column background colour */
}
.threecol .col1 {
	width:46%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
	
}
.threecol .col2 {
	width:14%;			/* Width of left column content (column width minus padding on either side) */
	left:38%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:28%;			/* Width of right column content (column width minus padding on either side) */
	left:92%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

Open in new window

columbusaceAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark FranzProject ManagerCommented:
Have you tried setting your scroll to Auto?

overflow: auto;
0
sunu340Commented:
The problem is here :
.colmask {
      position:relative;      /* This fixes the IE7 overflow hidden bug */
      clear:both;
      top:31px;
      float:left;
      width:85%;                  /* width of whole page */
      top:5%;
      height:95%;
      margin-left: 10%;
        margin-right: 5%;
      overflow:hidden;
      z-index:10;
      /* This chops off any overhanging divs */
}

U have set overflow:hidden; which is creating that appearance..Try setting it as overflow: auto; and u will get the desired look and feel.
Hope this helps :)
0
Mark FranzProject ManagerCommented:
Sunu340, while we value your additional comments here at EE, your comment is a repeat of what I suggested.  Try to refrain from posting repeat comments.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

sunu340Commented:
mgfranz, I have no any intention to post repeat comments. I just thought of showing the exact place of change so that it will be easier for him to make changes..

Thanks,
sunu340
0
Mark FranzProject ManagerCommented:
Since the OP already knows where the problem lies with his comment of, "the problem is: in the colmask class...", it is assumed that he knows where the correction will need to be made.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
columbusaceAuthor Commented:
the problem has been solved otherwise. the answer is not necessary any more. thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.