Autor |
Nachricht |
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Di 13.09.2005 21:05
Titel
|
|
|
Er meint, dass wenn Du einem DIV und dem html,body 100% Höhe gibst, dann ist ja eigentlich der ganze Schirm gefüllt. Scrollt man aber nun runter, weil da noch was kommt, wird das DIV/der body/der html nicht an die Höhe angepasst. Das liegt daran, dass sich die 100% auf den Viewport beziehen.
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 13.09.2005 21:23
Titel
|
|
|
Aha hört sich logisch an
Aber das Problem mit dem Scrollen und dem Hintergrund
könnte man so faken:
Code: | html {
height: 100%;
}
body {
margin:0px;
padding:0px;
}
#helpbackground {
position:absolute;
background-image: url(blub.jpg);
height:100%;
width: 250px;
z-index:0;
}
#langertext {
position:relative;
height: auto;
width: 250px;
background-image: url(blub.jpg);
} |
und als html
Code: | <body><div id="helpbackground"> </div>
<div id="langertext"> text text .... </div>
</body> |
Also quasi ein Hintergrundlayer mit bild für wenig Text (weil auto
ja sich am Text orientiert) und drüber den eigentlichen Layer mit
dem Text (wenn er lang genug ist scrollt der Hintergrund mit).
//edit: korrigiert
Zuletzt bearbeitet von Raumwurm am Mi 14.09.2005 08:48, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
13pixelchen
Account gelöscht
Ort: -
|
Verfasst Di 13.09.2005 21:41
Titel
|
|
|
Ja, doch, ich muss zugeben, unter bestimmten Bedingungen scheint dies eine Lösung zu sein. Aber dann war es wohl bei Bethys Projekt keine, sonst wär ich bestimmt draufgekommen
Code korrigiert:
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {
height: 100%;
}
body {
margin:0px;
padding:0px;
background-color: #110000;
}
#helpbackground {
position:absolute;
background-color: #ff0000;
height:100%;
width: 250px;
z-index:0;
}
#langertext {
position:relative;
height: auto;
width: 250px;
background-color: #dd0000;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="helpbackground"> </div>
<div id="langertext"> text text .... text text ....text text ....text text ....text text ....
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
text text ....text text ....text text ....text text ....text text ....text text ....<br />
</div>
</body>
</html>
|
Zuletzt bearbeitet von am Di 13.09.2005 22:10, insgesamt 1-mal bearbeitet
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 13.09.2005 22:03
Titel
|
|
|
ups - der <div id="helper"> </div> ist
natürlich überflüssig - hatte ich vergessen rauszu-
kicken
|
|
|
|
|
|
|
|
Ähnliche Themen |
Anordnung von Bild auf rechter Seite auf ca. 3/4 der Höhe!
Bild skalieren, Höhe vorgegeben, Breite proportional
bild zuerst auf 100% höhe skalieren, danach repeat-x
[css] Problem mit div Höhe
Problem mit der Höhe
Problem mit DIV-Höhe
|
|