Dabei seit: 22.02.2002 Ort: - Alter: - Geschlecht:
Verfasst Fr 24.03.2006 14:36 Titel
CSS Problem Header feste Höhe, Content Fensterfüllend?
Hi bis jetzt hab ich noch keine Lösung über die Suche
oder google etc. gefunden-
habe eine Seite mit nem header mit fester höhe, darunter
den contentbereich, der sich der seite anpassen soll.
habe html und body auf 100% gesetzt..wenn ich den content
auf 100% setze rechnet er die header höhe hinzu und es entstehen
scrollbars, setze ich die höhe auf 81% hört der content
nie genau am fensterrand auf..könnt ihr mir helfen?
brauche keinen footer.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html,body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
font: 10pt sans-serif;
}
Dabei seit: 25.01.2006 Ort: Freiburg Alter: - Geschlecht:
Verfasst Fr 24.03.2006 15:15 Titel
Hi
das wird so auch nicht funktionieren:
Wie willst du denn bei 100px und 81% auf insgesamt 100% kommen? Das ist wie mit den Äpfeln und Birnen
Ich unterscheide mal 2 Fälle:
1.Fall: Breite des Inhaltcontainers ist 100%, also so breit wie der Browser:
Du gibst dem body-Tag die Hintergrundfarbe des Contents, somit "immitiert" er einen Content-Bereich, der 100% hoch ist
2.Fall: Breite des INhaltscontainers ist fix eingestellt, also 800px oder so
Du baust um beide Container (#head und #content) einen weiteren Container und gibst diesem die Hintergrundfarbe des Containers. Diesem Container gibst du dann ein min-height:; für gute Browser und ein explizites height:; für den IE
Dabei seit: 22.02.2002 Ort: - Alter: - Geschlecht:
Verfasst Fr 24.03.2006 16:09 Titel
ok merci;)
nächstes problem wäre wenn der content zu lange ist
zeigt er mir den scrollbar des browsers an, allerdings
scrollt dann der head mit weg- wie kann ich es anstellen,
dass der head bereich fest bleibt und nur der content-falls
zu lang scrollbar ist?
habe schon mit overflow hidden für den body probiert und
dann nur dem content einen scrollbar zugeteilt, sah
aber ziemlich abenteuerlich aus..
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<div id="container">
<div id="header">
<div id="left">
<div id="right"></div>
<div style="clear:both;"></div>
</div>
</div>
<div id="content">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec eget nisi.
Sed nunc metus, lobortis sed, suscipit in, pulvinar
sit amet, lacus. Nullam facilisis bibendum mauris.
Quisque dolor nulla, pellentesque ac, commodo volutpat,
viverra vitae, dolor. Suspendisse potenti. Suspendisse
felis sapien, sagittis viverra, vehicula id, pellentesque
vulputate, tortor. Curabitur aliquet nunc a leo. Duis et sapien
quis purus pulvinar imperdiet. Mauris consectetuer nisi in enim.
Vestibulum adipiscing enim eget pede. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos.
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec eget nisi.
Sed nunc metus, lobortis sed, suscipit in, pulvinar
sit amet, lacus. Nullam facilisis bibendum mauris.
Quisque dolor nulla, pellentesque ac, commodo volutpat,
viverra vitae, dolor. Suspendisse potenti. Suspendisse
felis sapien, sagittis viverra, vehicula id, pellentesque
vulputate, tortor. Curabitur aliquet nunc a leo. Duis et sapien
quis purus pulvinar imperdiet. Mauris consectetuer nisi in enim.
Vestibulum adipiscing enim eget pede. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec eget nisi.
Sed nunc metus, lobortis sed, suscipit in, pulvinar
sit amet, lacus. Nullam facilisis bibendum mauris.
Quisque dolor nulla, pellentesque ac, commodo volutpat,
viverra vitae, dolor. Suspendisse potenti. Suspendisse
felis sapien, sagittis viverra, vehicula id, pellentesque
vulputate, tortor. Curabitur aliquet nunc a leo. Duis et sapien
quis purus pulvinar imperdiet. Mauris consectetuer nisi in enim.
Vestibulum adipiscing enim eget pede. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos hymenaeos.
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.