Div am unteren Bildschirmrand

Buhmann · 10.02.2006, 22:58

Wie bekomme ich mit css ein <div> tag so formatiert, dass er immer ganz unten von der Seite ist? Positioniere ich ihn Absolut mit bottom:0px; ist er zwar am Anfang unten, macht aber Probleme wenn die Seite eine Scrollbar hat, da er den anderen inhalt überdeckt und nur am Unteren Rand des Bildschirms (am anfang) ist, nicht aber am unteren Rand der Seite.
Positioniere ich ihn Normal und füge nichts danach ein, so kann er bei Seiten ohne 100% höhe auch schonmal über dem unteren Rand hängen bleiben...

PaterNoster · 10.02.2006, 23:06

Weiß ja nicht, wie die Seite aufgebaut ist, vielleicht hilft das hier ja schon

http://forum.developers-guide.net/showthread.php?t=854

Lars · 10.02.2006, 23:09

Code:

position: fixed;
bottom: 0px;

Sollte helfen.

Buhmann · 10.02.2006, 23:17

Nein, so ist es am unteren Rand des Anzeigebildschirms, nicht aber am unteren Rand der Seite...

Lars · 10.02.2006, 23:20

Zeig doch mal was du hast.

Buhmann · 10.02.2006, 23:36

Derzeit einfach nur ein div am Ende des Html Dokuments mit folgenden CSS eigenschaften:

Code:

#foot {
        width:100%;
        background-color: #F0F0F0;
        height:20px;
        margin:0px;
        margin-top: 10px;
        padding:0px;
        border-top:1px solid #000000;
        text-align:right;
        font-family: verdana, helvetica, arial;
        font-size:small;
}

aber wenn die Seite nicht 100% höhe hat, hängt das div über dem unteren Bildschirmrand.

Lars · 10.02.2006, 23:51

Bin gerade zu müde das zu erklären, folgt morgen Nachmittag

PaterNoster · 11.02.2006, 00:09

Mal eben schnell geklöppelt (bitte nicht durch den Validator jagen

), wenn es ansatzweise das ist, was Du möchtest, spiel mal ein bisschen damit rum

http://testen-ist.wischtisch.de/div-test.html

Buhmann · 11.02.2006, 00:18

Ich habe derzeit nicht die gesamte website in einem div und wäre auch froh, wenn das so bleiben würde. Wenn es keine andere möglichkeit gibt, wäre das aber natürlich auch eine Möglichkeit, thx.

PaterNoster · 11.02.2006, 00:22

Geht auch mit einem DIV weniger, aber mehr fällt mir spontan nicht ein:

http://testen-ist.wischtisch.de/div-test2.html

Buhmann · 11.02.2006, 00:47

Naja das Prinzip ist aber dennoch das gleiche.
Ist jetzt aber auch zu spät ... ich probier morgen mal rum, evtl kann man ja auch einfach mal versuchen den body relativ zu orientieren...

Jan · 13.02.2006, 14:25

Und?
Wie kann man einen Div ans untere ende stellen? Also sozusagen als footer?

Buhmann · 13.02.2006, 14:50

Ich habe es auch noch nicht herausgefunden und ihn deswegen fürs erste einfach weggelassen.

Jan · 13.02.2006, 17:15

Mich würde es schon interessieren. Kann doch net so schwer sein oder? Ich weiß es leider net

dago · 13.02.2006, 22:26

Also, das hier funktioniert im IE und in FF! In anderen Browsern habe ich es nicht getestet, müsste aber auch gehen.

HTML-Code:

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

<style type="text/css">
<!--
/**
* HTML und BODY auf die komplette Höhe der Seite festlegen.
*/
html
{
 height:100%;
}

body
{
 height:100%;
 margin:0; padding:0;
}

/**
* Diese Eigenschaften werden einem DIV zugewiesen in
* welchem die komplette Seite liegt.
*
* Durch die festlegung der relativen Position, orientieren
* sich alle darin enthaltenen Elemente die positioniert
* werden nicht mehr am Browser, sondern an diesem.
*/
#seite
{
 position:relative; top:0; left:0; 
 min-height:100%;
}

/**
* Hier wird der Abstand vom untern Rand festgelegt, damit
* sich die Fusszeile nicht den Inhalt verdekt!
*/
#seite #inhalt
{
 padding-bottom:20px; /* Identisch mit der Fusszeilen Höhe! */
}

/**
* Positionieren der Fusszeile. Zur besserer Kontrolle könnte
* man noch mit "height" die Höhe festlegen.
*/
#seite #fusszeile
{
 position:absolute; bottom:0; left:0;
}
//-->
</style>

</head>
<body>

<div id="seite">
     <div id="inhalt">
	  <!-- Hier der Inhalt der Seite! -->
	  Inhalt
     </div>
     
     <div id="fusszeile">
	  <!-- Hier der Inhalt der Fusszeile -->
	  Fusszeile
     </div>
</div>

</body>
</html>

Wichtig für den IE ist oben die DOCTYPE Angabe (egal welche), sonst funktiert es bei dem nicht richtig!

Na dann viel Spaß beim Testen!

PaterNoster · 13.02.2006, 22:52

Das ist ja nicht so weit entfernt von meiner Lösung; Problem an der Sache ist, es sollte ohne verschachtelte DIVs funktionieren

Edith: Zum Vergleichen siehe http://testen-ist.wischtisch.de/div-test2.html

dago · 13.02.2006, 23:13

Hi, füge mal mehrere Zeileumbühe rein! Dann wirst du merkern, dass die Fusszeile immer am unteren Rand des Browsers klebt und der Text dann auf einmal unter der Fusszeile erscheint. Ist eben noch nicht fertig der Script!

Ohne DIV Verschachtelung, kann man das nur mit Tabelle realisieren. Sonst geht es nicht! Wegen der Browser, da die ja bekanntlich CSS unterschiedlich und nicht immer korrekt intepritieren!

Da fürt leider kein Weg vorbei!

pichfl · 15.02.2006, 14:43

http://www.themaninblue.com/writing/...ve/2005/08/29/

wie wärs damit?

PaterNoster · 15.02.2006, 15:37

Zitat:

Zitat von Buhmann

Ich habe derzeit nicht die gesamte website in einem div und wäre auch froh, wenn das so bleiben würde. Wenn es keine andere möglichkeit gibt, wäre das aber natürlich auch eine Möglichkeit, thx.

Die DIV-Variante ist schon durch, er sucht eigentlich noch eine andere Möglichkeit; aber ich bin da seeeehr skeptisch...

dago · 15.02.2006, 16:39

@pichfl: hehe... , der Script macht nicht das was er sollte!

@PaterNoster: Zur Zeit, gibt es keine andere Variante!

Villeicht später, wenn die neueren Browser raus kommen. Also mit CSS geht es anders nicht!

Man kann wie gesagt, dass dann mit Tabellen lösen, von was ich nur abraten kann. JavaScript were noch eine Möglichkeit, aber der von mir geschriebener Code funktioniert auch ohne!

Also @Buhmann, wenn du eine solche Fusszeile haben möchtest, kommst du an der DIVs verschachtelung Variante nicht vorbei!

10.02.2006, 22:58	Nach oben #1
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Div am unteren Bildschirmrand Wie bekomme ich mit css ein <div> tag so formatiert, dass er immer ganz unten von der Seite ist? Positioniere ich ihn Absolut mit bottom:0px; ist er zwar am Anfang unten, macht aber Probleme wenn die Seite eine Scrollbar hat, da er den anderen inhalt überdeckt und nur am Unteren Rand des Bildschirms (am anfang) ist, nicht aber am unteren Rand der Seite. Positioniere ich ihn Normal und füge nichts danach ein, so kann er bei Seiten ohne 100% höhe auch schonmal über dem unteren Rand hängen bleiben...

10.02.2006, 23:06	Nach oben #2
PaterNoster Erfahrener Benutzer Registriert seit: 18.08.2005 Ort: Dortmund Beiträge: 166	Weiß ja nicht, wie die Seite aufgebaut ist, vielleicht hilft das hier ja schon http://forum.developers-guide.net/showthread.php?t=854 __________________ wischtisch.de - jetzt auch mit Fotos. Und Senf.

10.02.2006, 23:09	Nach oben #3
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Code: position: fixed; bottom: 0px; Sollte helfen.

10.02.2006, 23:36	Nach oben #6
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Derzeit einfach nur ein div am Ende des Html Dokuments mit folgenden CSS eigenschaften: Code: #foot { width:100%; background-color: #F0F0F0; height:20px; margin:0px; margin-top: 10px; padding:0px; border-top:1px solid #000000; text-align:right; font-family: verdana, helvetica, arial; font-size:small; } aber wenn die Seite nicht 100% höhe hat, hängt das div über dem unteren Bildschirmrand.

11.02.2006, 00:09	Nach oben #8
PaterNoster Erfahrener Benutzer Registriert seit: 18.08.2005 Ort: Dortmund Beiträge: 166	Mal eben schnell geklöppelt (bitte nicht durch den Validator jagen ), wenn es ansatzweise das ist, was Du möchtest, spiel mal ein bisschen damit rum http://testen-ist.wischtisch.de/div-test.html __________________ wischtisch.de - jetzt auch mit Fotos. Und Senf.

10.02.2006, 23:17	Nach oben #4
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Nein, so ist es am unteren Rand des Anzeigebildschirms, nicht aber am unteren Rand der Seite...

10.02.2006, 23:20	Nach oben #5
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Zeig doch mal was du hast.

10.02.2006, 23:51	Nach oben #7
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Bin gerade zu müde das zu erklären, folgt morgen Nachmittag

11.02.2006, 00:18	Nach oben #9
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Ich habe derzeit nicht die gesamte website in einem div und wäre auch froh, wenn das so bleiben würde. Wenn es keine andere möglichkeit gibt, wäre das aber natürlich auch eine Möglichkeit, thx.

11.02.2006, 00:22	Nach oben #10
PaterNoster Erfahrener Benutzer Registriert seit: 18.08.2005 Ort: Dortmund Beiträge: 166	Geht auch mit einem DIV weniger, aber mehr fällt mir spontan nicht ein: http://testen-ist.wischtisch.de/div-test2.html __________________ wischtisch.de - jetzt auch mit Fotos. Und Senf.

11.02.2006, 00:47	Nach oben #11
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Naja das Prinzip ist aber dennoch das gleiche. Ist jetzt aber auch zu spät ... ich probier morgen mal rum, evtl kann man ja auch einfach mal versuchen den body relativ zu orientieren...

13.02.2006, 14:25	Nach oben #12
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 474	Und? Wie kann man einen Div ans untere ende stellen? Also sozusagen als footer? __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

13.02.2006, 14:50	Nach oben #13
Buhmann Erfahrener Benutzer Registriert seit: 19.08.2005 Beiträge: 113	Ich habe es auch noch nicht herausgefunden und ihn deswegen fürs erste einfach weggelassen.

13.02.2006, 17:15	Nach oben #14
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 474	Mich würde es schon interessieren. Kann doch net so schwer sein oder? Ich weiß es leider net __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

13.02.2006, 22:52	Nach oben #16
PaterNoster Erfahrener Benutzer Registriert seit: 18.08.2005 Ort: Dortmund Beiträge: 166	Das ist ja nicht so weit entfernt von meiner Lösung; Problem an der Sache ist, es sollte ohne verschachtelte DIVs funktionieren Edith: Zum Vergleichen siehe http://testen-ist.wischtisch.de/div-test2.html __________________ wischtisch.de - jetzt auch mit Fotos. Und Senf.

13.02.2006, 23:13	Nach oben #17
dago Erfahrener Benutzer Registriert seit: 17.11.2005 Ort: Rheinland-Pfalz, Osthofen Beiträge: 122	Hi, füge mal mehrere Zeileumbühe rein! Dann wirst du merkern, dass die Fusszeile immer am unteren Rand des Browsers klebt und der Text dann auf einmal unter der Fusszeile erscheint. Ist eben noch nicht fertig der Script! Ohne DIV Verschachtelung, kann man das nur mit Tabelle realisieren. Sonst geht es nicht! Wegen der Browser, da die ja bekanntlich CSS unterschiedlich und nicht immer korrekt intepritieren! Da fürt leider kein Weg vorbei!

15.02.2006, 14:43	Nach oben #18
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	http://www.themaninblue.com/writing/...ve/2005/08/29/ wie wärs damit?

15.02.2006, 16:39	Nach oben #20
dago Erfahrener Benutzer Registriert seit: 17.11.2005 Ort: Rheinland-Pfalz, Osthofen Beiträge: 122	@pichfl: hehe... , der Script macht nicht das was er sollte! @PaterNoster: Zur Zeit, gibt es keine andere Variante! Villeicht später, wenn die neueren Browser raus kommen. Also mit CSS geht es anders nicht! Man kann wie gesagt, dass dann mit Tabellen lösen, von was ich nur abraten kann. JavaScript were noch eine Möglichkeit, aber der von mir geschriebener Code funktioniert auch ohne! Also @Buhmann, wenn du eine solche Fusszeile haben möchtest, kommst du an der DIVs verschachtelung Variante nicht vorbei!