mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 19.10.2019 13:48 Benutzername: Passwort: Auto-Login

Thema: CSS, height 100% und der Mist mit Browserverschiedenheiten vom 04.11.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS, height 100% und der Mist mit Browserverschiedenheiten
Seite: 1, 2  Weiter
Autor Nachricht
DonRollo
Threadersteller

Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 17:48
Titel

CSS, height 100% und der Mist mit Browserverschiedenheiten

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen!

Wühle mich seit Tagen durch die Foren des Internets um mein CSS-Formatierungsproblem zu lösen. Leider tauschen immer wieder neue Probleme auf. Jetzt weiß ich hier nicht mehr weiter: Es geht mal wieder um CSS und 100% Höhe.

So soll es optimaler Weise aussehen: (In IE gehts)
http://crm.event-4you.de/ie-super.jpg

Hier mal die Struktur der HTMl-Seite:
Code:

<body>

<div id="container-page">
     <div id="container-head">

    </div>
     <div id="container-foot">

   </div>
   <div id="wrapper" class="clearfix">
          <div id="container-menu">

      </div>
      <div id="container-content">
        
      </div>
   </div>
</div>
</body>


Im Internet Explorer habe ich die Höhe des wrappers schön auf die Seitenhöhe bekommen:
Code:

   height: expression(document.body.clientHeight - (260) + "px");


Bei Firefox und Opera geht das allerdings nur mit einer Pixelangabe:
Code:

   height: 500px;

Das macht das ganze natürlich leider etwas unflexibel und sieht bei größeren Monitor-Auflösungen unschön aus:
http://crm.event-4you.de/moz-falsch0.jpg

Gebe ich nun
Code:
 height:100%;
lässt der Firefox den Text einfach unten rauslaufen.
http://crm.event-4you.de/moz-falsch.jpg

Opera machts noch komischer:
http://crm.event-4you.de/opera-falsch.jpg


Hier der komplette CSS-Code:
Code:

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
   background-image: url('images/bg.jpg') ;
   background-attachment: fixed;
   font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
   font-size: 10pt;,
   color: black;
   overflow:hidden;
}



div   {
   margin: 0;
   padding: 0;
}


/* ==================== Definition für gesamte Seite */

#container-page {
   width: 1024px ;
   background-image: url('images/container.jpg') ;
   background-repeat: repeat-y ;
   position: relative ;
   min-height: 100%;
   height: auto !important;
   height: 100%;
   padding-left: 15px ;
   margin-right: auto ;
   margin-left: auto ;
}


/* ==================== Definition für Header */

#container-head {
   width: 100%;
   height: 190px;
   background-image: url('images/head.jpg') ;
   background-repeat:no-repeat;
   padding-left: 15px ;
   padding-top: 16px ;
   font-size: 10px;
}

/* ==================== Definition des Menüs */

#container-menu {
   float: left ;
   width: 145px ;
   padding-bottom: 25px ;
   padding-left: 10px ;
   margin-left: 10px;

}


/* ==================== Definition für den Inhalt */

#container-content {
   background-image: url('images/vl.gif') ;
   background-position: left ;
   background-repeat: repeat-y ;   
   width: 790px ;
   max-height: 90%;
   padding-bottom: 25px ;
   padding-left: 10px ;
   padding-right: 10px ;
   overflow:auto;

}

/* ==================== Definition für Footer */

#container-foot {
   background-image: url('images/foot.jpg') ;
   background-repeat:no-repeat;
   background-position:40px;
   width: 100%;
   position: absolute;
   bottom: 0 !important;
   bottom: -1px;
   height: 25px;
   margin-left: -40px ;
   padding-left: 40px ;
}

/* ==================== Definition für Wrapper */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
 }
 

.clearfix{
   display: block;
   height: expression(document.body.clientHeight - (260) + "px");
   height: 100%;
}



WAS läuft hier falsch?? Wie bekomme ich auch in Firefox und Opera das DIV container-content ungefähr auf die passende Höhe??
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 18:50
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,
deinem Code fehlt auf den ersten Blick z.B. der Doctype etc.

Aber wenn Du sowieso Javascript für den IE6 einsetzt, kannst
Du die restlichen Browser mit einer ziemlich simplen CSS-
Konstruktion bedienen:
Greisliges Boxmodell-Dummy

Den albernen IE6 gibts Du dann per C-Comment noch ein Script
für das Layout mit.

Gruß

Zweitaccount
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DonRollo
Threadersteller

Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 19:02
Titel

Antworten mit Zitat Zum Seitenanfang

Den Doctype hatte ich hier mal rausgekürzt.
Ist aber vorhanden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Für IE benutze ich übrigens eine andere css datei mittels:
Code:

<!--[if IE]>
  <style type="text/css">@import url(../ie.css);</style>
<![endif]-->


Zuletzt bearbeitet von DonRollo am Di 04.11.2008 19:05, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
status4

Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 19:22
Titel

Antworten mit Zitat Zum Seitenanfang

Wenn ich deinen Entwurf korrekt verstehe bietet dir stu nicholls vers. Möglichkeiten an:

http://www.cssplay.co.uk/layouts/bodyfix.html
http://www.cssplay.co.uk/layouts/fixit.html
  View user's profile Private Nachricht senden
DonRollo
Threadersteller

Dabei seit: 04.11.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 19:33
Titel

Antworten mit Zitat Zum Seitenanfang

Ja genau so in etwa soll das aussehen.
H E A D E R
Menü Content
F O O T E R
Das ganze dann allerdings zentriert in der Mitte und kein Scrollen der ganzen Seite (Header und Footer also dauerhaft sichtbar). Und das Menü soll beim scrollen des Contents natürlich feststehen und nicht mit nach oben verschwinden.

Bei deinem Link
http://www.cssplay.co.uk/layouts/bodyfix.html
ist es entweder zentriert und kein Menü ODER linksbündig und mit Menü.
Und genau da liegt mein Problem. Einzeln kein Problem. Aber zusammen gehts nicht so richtig.

Gruß
Roland


Zuletzt bearbeitet von DonRollo am Di 04.11.2008 19:34, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
status4

Dabei seit: 01.10.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 19:36
Titel

Antworten mit Zitat Zum Seitenanfang

Naja, das ist jetzt nicht wirklich ein Problem oder? Entweder du ergänzt bei dem einen das Menü oder beim anderen die Breite und Zentrierung. * Keine Ahnung... *
  View user's profile Private Nachricht senden
SURE612

Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht: Männlich
Verfasst Di 04.11.2008 21:22
Titel

Antworten mit Zitat Zum Seitenanfang

mach das ganze css nochmal neu
das is zuviel krams

mache doch einfach alles untereinander ohne position absolute
dafür mit width in %

z.B.

head: 10%
content: 10%
foot: 10%

dann im content 2 float divs mit height: 100%
overflow: auto;

fertig
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 04.11.2008 22:29
Titel

Antworten mit Zitat Zum Seitenanfang

Die Stu Nicholls Lösungen sind schon ein prima
Geschichte, leider basieren die halt auf den
Quirksmode vom IE. Was ist denn an meinem
Beispiel auszusetzen - außer das Du da noch
deine Grafik drüberklatschen mußt?
  View user's profile Private Nachricht senden
 
Ähnliche Themen Wieder mal... CSS height 100%
CSS - DIV height 100% - klappt nicht beim Firefox
CSS / Seite mit Header - Content - Footer / height="100%" ?
[CSS] Height hin, Height her - Größe von DIV's
DivTabellen - height:100%
div height 100%?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.