nicht angemeldet
div absolut am bottom positioniert - aber...
hallo leute,
ich habe folgendes Problem. Und zwar möchte ich ein div-container am unteren Browserrand positionieren - im Prinzip ganz easy mit position:absolute zu lösen. Allerdings habe ich einen weiteren div-container mit Inhalten welcher via z-index über dem "bottom-div" steht. Wenn der Inhalt nun das Browserfenster zum scrollen nötigt, bleibt mein "bottom-div" nicht am bottom, sondern in der ursprünglichen Position des "ungescrollten" Browserfensters. Wie kann ich mein div nun "richtig" am bottom positionieren?
hier mal mein test-code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
html {
height:100%
}
body {
margin:0px;
padding:0px;
height:100%;
}
#footer {
width:100%;
height:15%;
position:absolute;
bottom:0px;
left:0px;
z-index:0;
background-color:#CAE0ED
}
#content {
position:absolute;
left:50%;
top:50px;
margin:0px 0px 0px -220px;
width:400px;
padding:20px;
background:#F2F2F2;
border:2px solid #222222;
z-index:1
}
</style>
</head>
<body>
<div id="content"></div>
<div id="footer">
</div>
</body>
</html>
-
hallo leute,
ich habe folgendes Problem. Und zwar möchte ich ein div-container am unteren Browserrand positionieren - im Prinzip ganz easy mit position:absolute zu lösen. Allerdings habe ich einen weiteren div-container mit Inhalten welcher via z-index über dem "bottom-div" steht. Wenn der Inhalt nun das Browserfenster zum scrollen nötigt, bleibt mein "bottom-div" nicht am bottom, sondern in der ursprünglichen Position des "ungescrollten" Browserfensters. Wie kann ich mein div nun "richtig" am bottom positionieren?
hier mal mein test-code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
html {
height:100%
}body {
margin:0px;
padding:0px;
height:100%;
}#footer {
width:100%;
height:15%;
position:absolute;
bottom:0px;
left:0px;
z-index:0;
background-color:#CAE0ED
}#content {
position:absolute;
left:50%;
top:50px;
margin:0px 0px 0px -220px;
width:400px;
padding:20px;
background:#F2F2F2;
border:2px solid #222222;
z-index:1
}
</style>
</head><body>
<div id="content"></div>
<div id="footer">
</div>
</body>
</html>alles klar. habs schon gefunden. position:fixed .. oh mann :)
-
Und das klappt auch im IE bzw. FF ?
-
Und das klappt auch im IE bzw. FF ?
firefox, opera und safari verstehen das - der internet explorer interpretiert position fixed nicht - hier gibts allerdings viele mehr oder weniger komplizierte workarounds
-
-