[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>

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

Dj_Jestar · 10 Jul 2006 at 09:49

Will give it a try, thanks.