mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 17:39 Benutzername: Passwort: Auto-Login

Thema: CSS Problem Header feste Höhe, Content Fensterfüllend? vom 24.03.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Problem Header feste Höhe, Content Fensterfüllend?
Autor Nachricht
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 24.03.2006 13:36
Titel

CSS Problem Header feste Höhe, Content Fensterfüllend?

Antworten mit Zitat Zum Seitenanfang

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>



  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.03.2006 14:15
Titel

Antworten mit Zitat Zum Seitenanfang

Hi Lächel
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 *zwinker*

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 24.03.2006 15:09
Titel

Antworten mit Zitat Zum Seitenanfang

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>

  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.03.2006 15:32
Titel

Antworten mit Zitat Zum Seitenanfang

Es gibt die schöne Eigenschaft position und den dazugehörigen Wert fixed Lächel
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 15:42, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
wandgucker
Threadersteller

Dabei seit: 22.02.2002
Ort: -
Alter: -
Geschlecht: Weiblich
Verfasst Fr 24.03.2006 15:40
Titel

Antworten mit Zitat Zum Seitenanfang

danke werd gleich mal reinkucken;)
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] Layout(Header, Sidenav, Content, Footer) mit 100% Höhe
[CSS] dreispaltig, feste Breite, Header, Footer - Problem
[css problem] content höhe
Variabler Header/Footer in Höhe - fester Content - WIE?
[css] höhe passt sich nicht dem content an
CSS / Seite mit Header - Content - Footer / height="100%" ?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.