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?
 
mgfranzCommented:
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
 
mgfranzCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mgfranzCommented:
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
 
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
 
columbusaceAuthor Commented:
the problem has been solved otherwise. the answer is not necessary any more. thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.