XHTML / CSS: border Problem

michba

Hallo! :xmas1:
Ich möchte gerne auf der linken und auf der rechten Seite einer Homepage je einen vertikalen Balken haben.

Skizze:

+--+----------+--+
|  |          |  |
|  |  Inhalt  |  |
|  |          |  |
|  |          |  |

Also hab ich mir überlegt, dass ich einfach dem body-Element mit der CSS-Eigenschaft border-left bzw. -right die Rahmen formatiere.
Also so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>Test</title>
	<style type="text/css">
	body
	{
		margin:0;
		padding:0;
		border-left:100px solid gray; 
		border-right:100px solid gray;
	}
	</style>
</head>
<body>
	<div>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
		enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
		nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
		hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
		nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent 
		luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum 
		dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt 
		ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis 
		nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
		consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 
		molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan 
		et iusto odio dignissim qui blandit
	</div>
</body>
</html>

Das klappt auch soweit, nur will ich, dass der Rahmen bis ganz nach unten geht, und nicht da aufhört, wo auch der Inhalt endet.
Ich könnte zwar theoretisch mit Javascript die Fensterhöhe auslesen, und dann der height von body den entsprechenden Wert zuweisen, aber das ist ja keine besonders gute Lösung.

Hat jemand eine Idee, wie ich das Problem lösen könnte?
Danke im voraus! :xmas1:

SideWinder

DIV { height: 100% }

MfG SideWinder

michba

Hm, im Internet Explorer funktionierts so
Im Firefox und im Opera aber nicht
Trotzdem danke!

SideWinder

Dein DIV hat 100% der Höhe des Bodys, aber dein Body ist noch zu klein *g*

BODY {
    position: absolute;
    height: 100%;
    width: 100%;
}

DIV {
    height: 100%;
    border-left: 100px solid gray;
    border-right: 100px solid gray;
}

MfG SideWinder

michba

Vielen Dank! Jetzt funktioniert es

Btw, hab grad was lustiges entdeckt:
Wenn man statt gray(AE) grey(BE) schreibt, funktioniert es im Firefox und Opera trotzdem, im IE nicht :xmas2: