 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
wandgucker
Threadersteller
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;
}
#head
{
color: black;
background-color: gray;
padding: 0;
margin: 0;
height: 100px;
}
#content
{
color: black;
background-color: silver;
padding: 0;
height: 81%;
border: 1px solid black;
}
-->
</style>
</head>
<body>
<div id="head">head</div>
<div id="content">content</div>
</body>
</html>
|
|
|
| |
  |
 |
nicoG
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
|
|
| |
|
|
|
Anzeige
|
|
|
wandgucker
Threadersteller
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">
html, body
{
padding: 0;
border: 0;
margin: 0;
font: 10pt Arial;
height: 100%;
}
body
{
background-color: gray;
}
* html div#container { height: 100%; };
div#container
{
width: 100%;
min-height: 100%;
background: yellow;
color: black;
border: 0px solid gray;
}
div#header
{
height: 100px;
}
div#right
{
width: 100px;
height: 100%;
background: red;
float: right;
}
div#left
{
height: 100%;
background: darkblue; /*Verschachtelung von div left und right verhindert überlappen von right.*/
}
div#content
{
background-color: orange;
padding: 0 10px;
margin: 0 0px;
height: 100%;
font: bold 300% sans-serif;
/*overflow: scroll;
overflow-x: auto;*/
}
</style>
</head>
<body>
<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.
</div>
</div>
</body>
</html>
|
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Fr 24.03.2006 16:32
Titel
|
|
|
Es gibt die schöne Eigenschaft position und den dazugehörigen Wert fixed
Der IE versteht das leider nicht, also brauchst du für ihn ein Workaround: http://www.fabrice-pascal.de/artikel/posfixedie6
Zuletzt bearbeitet von nicoG am Fr 24.03.2006 16:42, insgesamt 1-mal bearbeitet
|
|
| |
|
|
wandgucker
Threadersteller
Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 24.03.2006 16:40
Titel
|
|
|
|
danke werd gleich mal reinkucken;)
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Layout(Header, Sidenav, Content, Footer) mit 100% Höhe
Variabler Header/Footer in Höhe - fester Content - WIE?
[CSS] dreispaltig, feste Breite, Header, Footer - Problem
[css problem] content höhe
[PHP] header("Content-Length: XX") Problem bei Firefox
möchte feste höhe für eine zelle erzwingen ..
|
|
|
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.
|
|
