CSS Boxes

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS Boxes

Post by nigma »

Anyone know how to make a box in CSS that will span the entire height of the screen at minimum? So if there are only three words in the box it will still take up the entire height of the sreen (whether resolution is 800x600 or greater).

Thanks for any help provided.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

height: 100%;

That should do it.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

That is what I tried first, but it for some reason isn't working.

My CSS Div boxes are layed out like:

<div id="container">
<div id="header">// HEADER STUFF</div>
<div id="mainContent">// MAIN CONTENT STUFF</div>
</div>

I added the "height: 100%" to the container div box.
jason
Site Admin
Posts: 1767
Joined: Thu Apr 18, 2002 3:14 pm
Location: Montreal, CA
Contact:

Post by jason »

Sorry, yeah, that could be a problem in some places.

Assuming you are using position: absolute; see if bottom: 0; works for you
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

The way I'd do it is:

Code: Select all

<table cellpadding="0" cellspacing="0" width="100%" height="100%" align="center" valign="middle">
<tr><td>
<!-- anything you want here //-->
</td></tr>
</table>
Hope that helps,

-Nay
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

CSS has problems with the height attribute in its current implementations. There are a variety of ways to trick it using container elements (DIVs within DIVs). I believe that there are relevant articles at http://www.positioniseverything.net.

Another option is to use javascript to get the height of the browser window and assign that pixel value to your DIV. Obviously there are problems with this method, as well. There are fewer display problems with tables (but even then the height=100% thing won't render properly on all platforms), but many more other problems.

You just have to decide what the best way to look at your project is. Does it need to be extensible? forward-looking? deliverable on multiple platforms (portables, PDAs, etc.)?
User avatar
SantaGhost
Forum Commoner
Posts: 41
Joined: Mon Sep 15, 2003 11:54 am

Post by SantaGhost »

this is what i use:

a div that covers the whole page, inside it a table with three columns, logo , links, content.

this is also very well possible with divs inside divs.

Code: Select all

<script type="text/javascript">
if (window.navigator.appName == "Netscape"){ document.write ("<div align='center'>"); }
else {document.write ("<div id='around'>"); }
</script>
	<table cellspacing="0" cellpadding="1" id="main">
		<tr><td class="tdtop"><img src="SnGlogo.jpg" alt="Santa Ghosts ClanLogo"></td></tr>
		
		<tr><td class="tdlinks">
			<a href="?page=Home">Home</a>
			<a href="?page=About">About</a>
			<a href="?page=Members">Members</a>
			<a href="?page=Contact">Contact</a>
			<a href="?page=Messages">Messages</a>
		</td></tr>
		<tr><td class="tdcontent">
<?php print ($content); ?>
		</td></tr>
	</table>
</div>
style.css (not full file)

Code: Select all

#around &#123; text-align: center; margin: 0;&#125;
table#main &#123; background: #fff; width: 750px; border-collapse: collapse; border: 1px solid #000;&#125;
.tdtop &#123; height: 150px; background: #091D01; text-align: center;&#125;
.tdlinks &#123; background: #000; text-align: center;  background: url("camo_desert.jpg"); padding: 8px; &#125;
.tdcontent &#123; background: #424942 url("halfscr-blue.gif"); color: #fff; padding-bottom: 50px; &#125;

.tdlinks a &#123; text-decoration: none; font-weight: bold; font-size: 20px; color: #FBFFCB; font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-align:center; padding: 2px 6px 2px 6px; margin-right: 3px; background: url("camouflage.jpg"); border: 2px solid #000;
	font-family:	Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serif;&#125;
.tdlinks a:hover &#123; border-color: #cad603 ; &#125;
example at http://santa-ghosts.pelle-webdesign.net/
Post Reply