Contenthöhe auf Browserhöhe anpassen
diwie Otto-Normal-Poster
Beiträge: 51
hallo,
ich möchte zum erstenmale eine webdesign ohne tabellen erstellen. dabei stosse ich bei CSS auf die selben probleme wie seinerzeit bei tabellen. die rede ist von der 100% Höhenangabe für bestimmte Elemente.
Ich habe also oben einen festen Headerbereich und unten einen festen Footer. Der Contentbereich dazwischen soll sich über die jeweilige Broserhöhe ausdehnen. Das klappt leider nicht richtig. Die Höhe des Contents erscheint so (s.u.) immer mit einer Höhe der jeweiligen gesamten Browserfensterhöhe?
Ich habe schon stundenlang gegoggled und gefrickelt, nix brachte den gewünschten Erfolg. Vielleicht weiß ja jemand von Euch eine Hilfestellung.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221: html {
height: 100%;
}
body {
height: 100%;
width: 818px;
margin: 0px auto;
text-align: center;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
background-color: #652B2A;
}
#site {
height: 100%;
width: 818px;
background-color: #EAE8DC;
}
a {
text-decoration: none;
color: #8C8B84;
}
a:hover {
text-decoration: none;
background-color: #BDD361;
}
/* header style */
#header_left {
height: 354px;
width: 10px;
background: url("images/header_left.gif") no-repeat;
float: left;
}
#header {
height: 354px;
width: 798px;
float: left;
}
#menu1 {
height: 42px;
width: 798px;
background: url("images/menu1_bg.gif") no-repeat;
}
#m1_nav {
clear: both;
list-style: none;
padding: 17px 0 0 0;
margin: 0 0 0 472px;
height: 15px;
}
#m1_nav li {
display: inline;
}
#m1_nav #p01 {display: block; width: 46px; height: 15px; float: left; background: url("images/menu1_01.gif") no-repeat 0 0;}
#m1_nav #p02 {display: block; width: 66px; height: 15px; float: left; background: url("images/menu1_02.gif") no-repeat 0 0;}
#m1_nav #p03 {display: block; width: 49px; height: 15px; float: left; background: url("images/menu1_03.gif") no-repeat 0 0;}
#m1_nav #p04 {display: block; width: 82px; height: 15px; float: left; background: url("images/menu1_04.gif") no-repeat 0 0;}
#m1_nav #p05 {display: block; width: 76px; height: 15px; float: left; background: url("images/menu1_05.gif") no-repeat 0 0;}
#m1_nav a#p01:hover {background: url("images/menu1_01.gif") no-repeat 0 -15px;}
#m1_nav a#p02:hover {background: url("images/menu1_02.gif") no-repeat 0 -15px;}
#m1_nav a#p03:hover {background: url("images/menu1_03.gif") no-repeat 0 -15px;}
#m1_nav a#p04:hover {background: url("images/menu1_04.gif") no-repeat 0 -15px;}
#m1_nav a#p05:hover {background: url("images/menu1_05.gif") no-repeat 0 -15px;}
#m1_nav #p01_aktiv {display: block; width: 46px; height: 15px; float: left; background: url("images/menu1_01_aktiv.gif") no-repeat 0 0;}
#m1_nav #p02_aktiv {display: block; width: 66px; height: 15px; float: left; background: url("images/menu1_02_aktiv.gif") no-repeat 0 0;}
#m1_nav #p03_aktiv {display: block; width: 49px; height: 15px; float: left; background: url("images/menu1_03_aktiv.gif") no-repeat 0 0;}
#m1_nav #p04_aktiv {display: block; width: 82px; height: 15px; float: left; background: url("images/menu1_04_aktiv.gif") no-repeat 0 0;}
#m1_nav #p05_aktiv {display: block; width: 76px; height: 15px; float: left; background: url("images/menu1_05_aktiv.gif") no-repeat 0 0;}
#m1_nav li a span {display: none;}
#header_logo {
height: 204px;
width: 798px;
background: url("images/header.jpg") no-repeat;
}
#menu2 {
height: 42px;
width: 798px;
background: url("images/menu2_bg.gif") no-repeat;
}
#m2_nav {
clear: both;
list-style: none;
padding: 11px 0 0 0;
margin: 0 0 0 145px;
height: 15px;
}
#m2_nav li {
display: inline;
}
#m2_nav #p06 {display: block; width: 102px; height: 15px; float: left; background: url("images/menu2_06.gif") no-repeat 0 0;}
#m2_nav #p07 {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_07.gif") no-repeat 0 0;}
#m2_nav #p08 {display: block; width: 80px; height: 15px; float: left; background: url("images/menu2_08.gif") no-repeat 0 0;}
#m2_nav #p09 {display: block; width: 84px; height: 15px; float: left; background: url("images/menu2_09.gif") no-repeat 0 0;}
#m2_nav #p10 {display: block; width: 73px; height: 15px; float: left; background: url("images/menu2_10.gif") no-repeat 0 0;}
#m2_nav #p11 {display: block; width: 76px; height: 15px; float: left; background: url("images/menu2_11.gif") no-repeat 0 0;}
#m2_nav #p12 {display: block; width: 105px; height: 15px; float: left; background: url("images/menu2_12.gif") no-repeat 0 0;}
#m2_nav #p13 {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_13.gif") no-repeat 0 0;}
#m2_nav a#p06:hover {background: url("images/menu2_06.gif") no-repeat 0 -15px;}
#m2_nav a#p07:hover {background: url("images/menu2_07.gif") no-repeat 0 -15px;}
#m2_nav a#p08:hover {background: url("images/menu2_08.gif") no-repeat 0 -15px;}
#m2_nav a#p09:hover {background: url("images/menu2_09.gif") no-repeat 0 -15px;}
#m2_nav a#p10:hover {background: url("images/menu2_10.gif") no-repeat 0 -15px;}
#m2_nav a#p11:hover {background: url("images/menu2_11.gif") no-repeat 0 -15px;}
#m2_nav a#p12:hover {background: url("images/menu2_12.gif") no-repeat 0 -15px;}
#m2_nav a#p13:hover {background: url("images/menu2_13.gif") no-repeat 0 -15px;}
#m2_nav #p06_aktiv {display: block; width: 102px; height: 15px; float: left; background: url("images/menu2_06_aktiv.gif") no-repeat 0 0;}
#m2_nav #p07_aktiv {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_07_aktiv.gif") no-repeat 0 0;}
#m2_nav #p08_aktiv {display: block; width: 80px; height: 15px; float: left; background: url("images/menu2_08_aktiv.gif") no-repeat 0 0;}
#m2_nav #p09_aktiv {display: block; width: 84px; height: 15px; float: left; background: url("images/menu2_09_aktiv.gif") no-repeat 0 0;}
#m2_nav #p10_aktiv {display: block; width: 73px; height: 15px; float: left; background: url("images/menu2_10_aktiv.gif") no-repeat 0 0;}
#m2_nav #p11_aktiv {display: block; width: 76px; height: 15px; float: left; background: url("images/menu2_11_aktiv.gif") no-repeat 0 0;}
#m2_nav #p12_aktiv {display: block; width: 105px; height: 15px; float: left; background: url("images/menu2_12_aktiv.gif") no-repeat 0 0;}
#m2_nav #p13_aktiv {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_13_aktiv.gif") no-repeat 0 0;}
#m2_nav li a span {display: none;}
#menu3 {
height: 20px;
width: 798px;
border-top: 2px solid #CCCBBD;
border-bottom: 2px solid #CCCBBD;
background: url("images/menu3_bg.gif") no-repeat;
}
#m3_nav {
clear: both;
float: right;
list-style: none;
padding: 0;
margin: 0;
height: 20px;
}
#m3_nav li {
display: inline;
}
#m3_nav #p06s01 {display: block; width: 82px; height: 20px; float: left; background: url("images/menu3_06_01.gif") no-repeat 0 0;}
#m3_nav #p06s02 {display: block; width: 80px; height: 20px; float: left; background: url("images/menu3_06_02.gif") no-repeat 0 0;}
#m3_nav #p07s01 {display: block; width: 96px; height: 20px; float: left; background: url("images/menu3_07_01.gif") no-repeat 0 0;}
#m3_nav #p07s02 {display: block; width: 121px; height: 20px; float: left; background: url("images/menu3_07_02.gif") no-repeat 0 0;}
#m3_nav #p07s03 {display: block; width: 93px; height: 20px; float: left; background: url("images/menu3_07_03.gif") no-repeat 0 0;}
#m3_nav a#p06s01:hover {background: url("images/menu3_06_01.gif") no-repeat 0 -20px;}
#m3_nav a#p06s02:hover {background: url("images/menu3_06_02.gif") no-repeat 0 -20px;}
#m3_nav a#p07s01:hover {background: url("images/menu3_07_01.gif") no-repeat 0 -20px;}
#m3_nav a#p07s02:hover {background: url("images/menu3_07_02.gif") no-repeat 0 -20px;}
#m3_nav a#p07s03:hover {background: url("images/menu3_07_03.gif") no-repeat 0 -20px;}
#m3_nav #p06s01_aktiv {display: block; width: 82px; height: 20px; float: left; background: url("images/menu3_06_01_aktiv.gif") no-repeat 0 0;}
#m3_nav #p06s02_aktiv {display: block; width: 80px; height: 20px; float: left; background: url("images/menu3_06_02_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s01_aktiv {display: block; width: 96px; height: 20px; float: left; background: url("images/menu3_07_01_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s02_aktiv {display: block; width: 121px; height: 20px; float: left; background: url("images/menu3_07_02_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s03_aktiv {display: block; width: 93px; height: 20px; float: left; background: url("images/menu3_07_03_aktiv.gif") no-repeat 0 0;}
#m3_nav li a span {display: none;}
#header_bottom {
height: 42px;
width: 798px;
background: url("images/header_bottom.gif") no-repeat;
}
#header_right {
height: 354px;
width: 10px;
background: url("images/header_right.gif") no-repeat;
float: left;
}
/* content style */
#content {
height: 100%;
width: 818px;
float: left;
background: url("images/content_bg.gif") repeat-y;
}
#content_left {
width: 563px;
height: 100%;
padding: 0 10px 0 20px;
text-align: left;
float: left;
}
#content_right {
width: 194px;
height: 100%;
border-left: 1px dashed #BDD361;
padding: 0 20px 0 10px;
text-align: left;
float: right;
}
#footer {
height: 30px;
width: 818px;
}
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
hallo..
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
vielen vielen dank für deine schnelle hilfe. beim lesen habe ich soweit alles verstanden ;)
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
ich muss doch nochmal nach hilfe rufen. ;) ich bekomme es nicht zufreidenstellend hin. im firefox schaut es schon ganz gut aus, bei wenig text im content bereich. im IE ist header und footer nicht zu sehen, trotz höherer werte für z-index als bei content.
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
nur schnell ne frage.. was ist wenn deri nhalt in content höher ist, als die seite??? dann scrollen???
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
nisita schrieb am 16.05.2005 17:00
ja bitte. ein scrollen der ganzen seite.
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
ich bezweifle mal, ob es da etwas gibt, was in allen browser -wenn überhaupt- funktioniert.. werds mir aber mal anschauen...
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
also für den ie habe ich eine funktionierende lösung, und auch für firefox / opera... da blöde ist nur, es geht nicht beides... bzw. ich habe noch keine lösung gefunden... probiere noch ein bisschen...
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
also habe jetzt auch eine version, die in beiden geht.. aber nur mit ie hack...
html:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
content box...
text
asfasdfdas
style5.css:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
* {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
}
body {
min-height: 100%;
max-height: 999%;
width: 818px;
text-align: center;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
background-color: #652B2A;
}
/* HACK nur für IE */
* html body {
height: 100%;
}
/* Ende IE HACK*/
#site {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: Green;
}
#header {
height: 50px;
width: 798px;
background-color: Lime;
}
/* content style */
#content {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background: url("images/content_bg.gif") repeat-y;
background-color: Aqua;
float: left;
}
#contentbox {
background-color: Red;
}
#contentboxunten {
height: 30px; /*muss so groß sein wie der footer*/
}
#footer {
clear:both;
float: left;
height: 30px;
width: 818px;
background-color: Fuchsia;
position: relative;
margin-top: -30px;
}
muss leider wieder los, woltle es aber noch schnell schicken.. kannst es ja erstmal ausprobieren, ob es deinen wünschen entspricht...
---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
vielen dank für deine mühe! ;)
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
ich habe jetzt ausgehend von deinem gerüst einiges ausprobiert. leider funktioniert dein quellcode bei mir nicht im firefox, die gesamthöhe wird dort leider noch nicht auf 100% höhe gestreckt. im IE schon. hat es bei dir funktioniert? ich habe die version FF 1.0.3 im einsatz.
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
sorry, war mein fehler.. im opera ging es, und da bin ich davon ausgegangen, dass der firefox es dann auch richtig macht.. der scheiterte aber an einemfehlenden height: 100%... und so ergaben sich mehrere neu probleme :(
naja, habe jedenfalls jetzt nach mehmaligen probieren etc jetzt eine lösung gefunden, die in allen 3en geht...
html (hat sich nicht viel verändert...):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
content box...
text
asfasdfdas
css:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79: * {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
min-height: 100%;
max-height: 999%;
}
body {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: #652B2A;
text-align: left;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
}
/* HACK nur für IE */
* html body {
height: 100%;
}
* html body #site #content {
height: 100%;
}
/* Ende IE HACK*/
#site {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: Green;
}
#header {
height: 50px;
width: 798px;
background-color: Lime;
z-index: 2;
position: relative;
}
#content {
min-height: 100%;
max-height: 999%;
width: 818px;
background: url("images/content_bg.gif") repeat-y;
background-color: Aqua;
margin-top: -50px; /* so groß wie die höhe des headers */
z-index: 1;
}
#contentbox {
background-color: Red;
}
#contentboxunten {
height: 30px; /* muss so groß sein wie der footer */
}
#contentboxoben {
height: 50px; /* muss so groß sein wie der header*/
}
#footer {
height: 30px;
width: 818px;
background-color: Fuchsia;
float: left;
margin-top: -30px; /* so groß wie die höhe des footers */
z-index: 3;
}
ich hoffe dochmal, bei dir sieht das genauso aus wie bei mir
mfg
nisita
---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
ich danke dir vielmals, tausend dank. jetzt klappt es auch bei mir. ;)
allerdings wäre es sehr ungewöhnlich, hätte ich nicht schon wieder neue probleme hätte. ;)
einige konnte ich schon selbst lösen, wie z.b. die unterschiedliche interpretation von margin werten in IE und FF.
aber eines habe ich im moment noch.
da das layout bei mir zentriert ist, macht die angabe position:relative in der klasse header, beim ändern der breite des browserfenster im IE probleme. der rest passt sich der neuen breite an, nur eben nicht der header, der bleibt so stehen.
nehme ich das position heraus, ist dieses verhalten zwar unterbunden, aber funktioneren dann nicht mehr die menues die sich in der header klasse in form eigener divs befinden. ich sehe zwar die menupunkte, es funktionieren aber weder die hover effekte noch kann man die punkte anklicken. gibt es dafür noch eine lösung?
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
nochmals vielen dank für die 1A Hilfe! ich fühle mich hier sehr gut aufgehoben. ;)
Diese Nachricht wurde geändert von: diwie
Profil
Editieren
Zitieren
nisita Posting-Schinder
Beiträge: 540
probiers mal mit:
für #site
jedenfalls habe ich das problem jetzt nicht mehr, allerdings bin ich mir nicht ganz sicher, ob ich nicht nochwas geändert habe.. ansonsten poste ich nochmal die ganze css datei..
mfg
nisita
---
"Wir sollten lernen, uns allmählich vom Überfluss zu befreien, um zur Einfachheit unseres eigenen Wesens vorzudringen." Jean Gastaldi
Profil
Editieren
Zitieren
diwie Otto-Normal-Poster
Beiträge: 51
super! das war es.
Vielen Dank, ich hoffe ich kann bei evtl. weiteren Problemen wieder hier anklopfen?! ;)
Profil
Editieren
Zitieren
