XHTMLforum - Eine etwas andere Content Positionierung

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Eine etwas andere Content Positionierung (http://xhtmlforum.de/showthread.php?t=59781)

Eine etwas andere Content Positionierung

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!

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>

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