Eine etwas andere Content Positionierung

scythe · #1 (**permalink**) 09.01.2010, 19:35

Guten Abend,

ich möchte für eine Webseite den gesamten Inhaltsbereich immer unten-links-bündig Darstellen.

Jedoch hab ich mit meiner nicht ganz korrekten Methode das Problem das wenn das Fenster kleiner als die Hp ist das keinerlei Scrollbalken entstehen und die sachen oben weggeschnitten werden.

Gibts da eine Möglichkeit bei dem der Inhalt das immer unten Links bündig ist bei zu kleinen Auflösungen aber regulär nach unten scrollbar wird?.

hier mal bisschen Quelltext:

Code:

	
html {
	height:100%;
	width:100%;
	}	

body {
	height:100%;
	width:100%;
	background:****;
	
	}
.wrap { 
     position:absolute;
	 left:0px;
	 bottom:0px;
	}
	
.content {
float:left;
width:670px;
height:500px;
background-color:*****;}

so hab ich das mal schnell aufgezogen also html>body>wrap>content

Hoffe ihr versteht was ich meine.

danke!

heiko_rs · #2 (**permalink**) 09.01.2010, 20:36

Spontan fällt mir dazu folgendes ein (zur Erklärung der IE-Lösung siehe Centering (horizontally and vertically) an image in a box. Um im IE < 8 einen Umbruch von div und span bei schmalem Viewport zu verhindern, sollte man sich noch weitere Ergänzungen überlegen, z.B. per white-space: nowrap, min-width, oder einem zusätzlichen Element - je nachdem, welche IE-Versionen berücksichtigt werden sollen. Weitere Alternative: den CC vor das div und dem IE < 8 die entsprechend angepasste FAQ-Lösung geben):

HTML-Code:

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

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
	}

html,
body {
	height: 100%;
	width: 100%;
	}	

html {
	display: table;
	}	

body {
	display: table-cell;
	vertical-align: bottom;
	}	

div {
	width: 670px;
	height: 500px;
	background-color: red;
	}

</style>

<!--[if lt IE 8]>
<style type="text/css">

div,
span {
	zoom: 1;
	vertical-align: bottom;
	}

div {
	display: inline;
	}

span {
	height: 100%;
	}

</style>
<![endif]-->

</head>

<body>

<div>Text</div>

<!--[if lt IE 8]><span></span><![endif]-->

</body>

</html>

scythe · #3 (**permalink**) 10.01.2010, 00:54

Dankeschön. display:table und vertical align sind eine tolle und saubere lösung.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Abstand eines Elementes lässt sich nicht verringern	zeitweise	CSS	2	28.04.2009 22:19
Dynamische Höhe im Content und DIV immer unten	keaton	CSS	8	13.12.2006 18:19
DIV Länge automatisch anpassen	judicious	CSS	10	08.05.2006 16:30
Probleme mit Positionierungen	schani	CSS	3	17.02.2006 14:12
div Positionierung bei Browsern	Ancient	CSS	22	17.03.2005 00:49