[CSS] fixed div height/width?

Dj_Jestar · 9 Jul 2006 at 16:29

I'm trying to get a pair of div's to be a fixed height and width which is a % of the page, with scrolling overflow.. is this doable?

So far I've tried any/all of the below combination but the div's always expand :|

Any help is appreciated:

Code:

div.page {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid #000;
	padding: 0;
}

div.dirs {
	position: relative;
	min-width: 90%;
	width: 90%;
	max-width: 90%;
	min-height: 45%;
	max-height: 45%;
	height: 45%;
	background: #ccc;
	margin: 0 0 5px 0;
	border: 1px solid #000;
	overflow: scroll;
}

This is the template:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" href="includes/style/style.css" />
		<title>Filebrowser</title>
</head>
<body>
<div class="page">
	{if $parent}
		<a href="index.php?parent=yes">Parent Directory</a>
	{/if}
	<div class="dirs">
	{if $dirs}
		<table class="dirs">
			{section name=dirs loop=$dirs}
			<tr><td><a href="index.php?folder={$dirs[dirs].url}">{$dirs[dirs].plain}</a></td></tr>
			{/section}
		</table>
	{else}
		<h1>No Subdirectories to display.</h1>
	{/if}
	</div>
	<div class="files">
	{if $files}
		<table class="files">
			{section name=files loop=$files}
			<tr><td><a href="download.php?folder={$files[files].url}">{$files[files].plain}</a></td></tr>
			{/section}
		</table>
	{else}
		<h1>No Files to display.</h1>
	{/if}
	</div>
</div>
</body>
</html>

joeyjojo · 9 Jul 2006 at 17:22

height, min-height, and max-height are awkward. I've had a lot of problems with forcing divs to a certain height in the past. What do you mean by "scrolling overflow"?

Augmented · 9 Jul 2006 at 18:45

A percentage width/height is relative to the containing element's dimensions:

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

Since the containing element in your markup is the <body> element, and you have no dimensions set for it, a minimum width of 95% will never be a fixed value. It will always be relative to the width of the browser window. If you want fixed dimensions, then you must use fixed units such as px and pt and not relative ones such as percentage

.

Dj_Jestar · 9 Jul 2006 at 22:36

aha, thanks!

Might conjur up a JS solution to grab screen size etc. etc.

Dj_Jestar · 10 Jul 2006 at 01:48

Well, JS works for width but not for height :|

Code:

		<script language="JavaScript" type="text/javascript">
			function bodyLoad ()
			{
				document.getElementById("page").height = window.innerHeight;
				document.getElementById("page").width = window.innerWidth;
			}
		</script>
	</head>
<body onload="bodyLoad()">
	<div class="page" id="page">

Augmented · 10 Jul 2006 at 09:22

You can use:

Code:

var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;

Dj_Jestar · 10 Jul 2006 at 09:49

Will give it a try, thanks.