Firefox, Height:100%-Problem

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Firefox, Height:100%-Problem

    Hallo,

    mein Problem:

    ich habe eine div-box die 100% groß sein soll, wenn wenig text drin steht, also sollte die hintergrundfrabe/bild hinter dem text sein. steht mehr text drin, als auf den bildschirm passt, so das gescrollt werden muss, sollte sich die box an diese textgröße anpassen und somit auch die hintergrundfrabe/bild. Im IE funktionier das auch, aber der Firefox lässt die hintergrundfrabe/bild nur in der bildschirmgröße und vergrößert diese nicht nach der menge des textes.

    bin an diesem problem paar stunden dran, würde mich über vorschläge, ideen oder auch auf eine lösung freuen.


    mein quellcode:
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <
    head>
    <
    style>
    htmlbody {
        
    height100%;
        
    margin0;
        
    background#fff;
        
    font-familyTahomaVerdanaArial;
        
    color#fff;
        
    font-size0.85em;
        
    text-aligncenter;
    }

    #page {
        
    background#000;
        
    width740px;
        
    marginauto;
        
    height100%;
    }

    #links {
        
    width540px;
        
    padding-left20px;
        
    floatleft;
    }
    </
    style>
    </
    head>
    <
    body>

    <
    div id="page">
        <
    div id="links">
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
    text<br /><br /><br />
        </
    div>
    </
    div>
    </
    body>
    </
    html

    gruss

    bomb

  • #2
    Re: Firefox, Height:100%-Problem

    Original geschrieben von bombzone
    aber der Firefox lässt die hintergrundfrabe/bild nur in der bildschirmgröße und vergrößert diese nicht nach der menge des textes.
    Natürlich, muss er ja auch - schließlich hast du eine feste Höhe angegeben.
    Alles, was nicht ins Element hineinpasst, fließt über dieses hinaus - Default für overflow ist visible.

    Was du eigentlich angeben willst, ist eine Mindesthöhe, min-height.
    (Plus CSS-Hack mit height für den IE, der min-height nicht kennt, aber height entsprechend fehlinterpretiert.)
    I don't believe in rebirth. Actually, I never did in my whole lives.

    Kommentar


    • #3
      sorry habe noch nie was von min-hight gehört, habe versucht #page min-hight:100% zuzuweisen hat aber nichts gebracht.

      Kommentar


      • #4
        PHP-Code:
        #page min-hight 
        also wenn schon
        PHP-Code:
        #page min-height 
        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          hilft nicht

          Kommentar


          • #6
            luke, nutze die macht!
            neuer code?

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Jaja die Macht, das Problem macht mich schon fertig hier....



              Code

              PHP-Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
              >
              <
              html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
              <
              head>
              <
              style>
              htmlbody {
                  
              height100%;
                  
              margin0;
                  
              background#fff;
                  
              font-familyTahomaVerdanaArial;
                  
              color#fff;
                  
              font-size0.85em;
                  
              text-aligncenter;
              }

              #page {
                  
              background#000;
                  
              width740px;
                  
              marginauto;
              min-height:100%;
              }

              #links {
                  
              width540px;
                  
              padding-left20px;
                  
              floatleft;
              }
              </
              style>
              </
              head>
              <
              body>

              <
              div id="page">
                  <
              div id="links">
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
              text<br /><br /><br />
                  </
              div>
              </
              div>
              </
              body>
              </
              html

              Kommentar


              • #8
                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                war das nicht so, dass der ie bei dieser angabe wieder in den fehlerhaften quirks-modus schaltet?

                wie solls ich denn #links verhalten? fehlt da nicht auch eine höhenangabe.

                gruß
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  Probiers mal hiermit (class clearfix!):
                  PHP-Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
                  >
                  <
                  html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                  <
                  head>
                  <
                  style>
                  htmlbody {
                      
                  height100%;
                      
                  margin0;
                      
                  background#fff;
                      
                  font-familyTahomaVerdanaArial;
                      
                  color#fff;
                      
                  font-size0.85em;
                      
                  text-aligncenter;
                  }
                  #page {
                      
                  background#000;
                      
                  width740px;
                      
                  marginauto;
                  min-height:100%;

                  }


                  #links {
                      
                  width540px;
                      
                  padding-left20px;
                      
                  floatleft;
                  }
                  .
                  clearfix:after {
                      
                  content"."
                      
                  displayblock
                      
                  font-size:1px;
                      
                  height1px
                      
                  clearboth
                      
                  visibilityhidden
                  }
                  .
                  clearfix {displayinline-table;}
                  /* Hides from IE-mac \*/
                  html .clearfix {height1%;}
                  .
                  clearfix {displayblock;}
                  /* End hide from IE-mac */
                  </style>
                  </
                  head>
                  <
                  body>

                  <
                  div class="clearfix" id="page">
                      <
                  div id="links">
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                  text<br /><br /><br />
                      </
                  div>
                  </
                  div>
                  </
                  body>
                  </
                  html
                  Meine Quelle für clearfix...
                  Zuletzt geändert von mcmurphy; 30.05.2006, 11:43.
                  "I don't want to belong to any club that would accept me as a member."

                  Groucho Marx

                  Kommentar


                  • #10
                    war das nicht so, dass der ie bei dieser angabe wieder in den fehlerhaften quirks-modus schaltet?
                    Das kann er ausnahmsweise => Browsermode
                    "I don't want to belong to any club that would accept me as a member."

                    Groucho Marx

                    Kommentar


                    • #11
                      Super, danke!!

                      Kommentar

                      Lädt...
                      X