Autor |
Nachricht |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.12.2009 15:30
Titel
|
|
|
Klingt nach folgendem:
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 {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-cell;
vertical-align: bottom;
}
div {
background: red;
height: 200px;
}
</style>
</head>
<body>
<div>Text</div>
</body>
</html> |
Wenn ja, kommt natürlich noch eine Extra-Lösung für IE < 8 dazu, der die table-Eigenschaften nicht kennt.
Zuletzt bearbeitet von heiko_rs am Do 10.12.2009 15:34, insgesamt 2-mal bearbeitet
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Do 10.12.2009 15:34
Titel
|
|
|
Wenn ich ihn richtig verstehe, will er seine Seite wie einen Footer am unteren Bildschirmrand ausrichten. Bei niedrigen Auflösungen hängt ihm dann aber die Seite unerreichbar nach oben aus dem Sichtfeld heraus...
|
|
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.12.2009 15:37
Titel
|
|
|
Genau, das passiert bei pos. abs. (wie er es momentan macht), aber nicht bei bottom-Ausrichtung per CSS-Tabelle (wie in meinem Code-Beispiel).
|
|
|
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Do 10.12.2009 17:20
Titel
|
|
|
Der Manuel Bieh hat mal vor laaanger Zeit eine nette Erklärung zu feststehenden footer Divs mit "beweglichem" Abstand geschrieben...
Wenn ich Dich richtig verstanden habe richtest Du ein Element unten aus und wunderst Dich warum es oben aus dem Viewport rausgeschoben wird wenn der Browser verkleinert wird...
Evtl kann Dir das hier helfen...
http://www.manuel-bieh.de/blog/einmal-erdgeschoss-bitte
Ansonsten würd ich mich über einen Layoutentwurf von Dir freuen...
Da kann man das gewünschte immer noch am Besten beurteilen...
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 10.12.2009 18:07
Titel
|
|
|
Das ist die alte (und nicht optimale) Variante der Footer-bottom-Positionierung, die man natürlich auch (in abgewandelter) Form verwenden kann. Im Gegensatz zu meinem ersten Vorschlag ist es hierbei allerdings nicht möglich, auf eine height-Deklaration des divs zu verzichten - die Höhe darf also nicht variabel sein (d.h. vom Inhalt bestimmt), sondern muss bekannt sein, in px oder em (wobei das im konkreten Falle ja okay wäre).
Einen IE-Hack braucht man hierbei auch noch, allerdings nicht mehr für < 8, sondern nur noch für < 7 (da diese Versionen min-height nicht kennen.)
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%;
}
body {
min-height: 200px;
position: relative;
}
div {
background: red;
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div>Text</div>
</body>
</html> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
DIV-Container soll anderen DIV-Container verdrängen
DIV Container bei Mouseover über DIV Container anzeigen
Variabler Div-Container bis zum mittigen Div-Container
CSS: Container im Container Vertikal zentrieren
[CSS] Div bottom anordnen
css-prob mit border-bottom im ie 6
|
|