Michi: Border 100% ist nicht 100% wenn man den Browser verkleinert

Ich habe hier einen CSS Code der funktioniert. Doch nun ist mir etwas aufgefallen was  ich mir nicht erklären kann.
Wenn man den Browser verkleinert, verkleinert sich die Box in der .mitte so wie sie es soll, aber die Linie, die ich mit BORDER gemacht habe wird auch kleiner, aber sie soll eigentlich weiter 100% über die ganze Seite sein:

Wenn man den Brwoser gross macht, dann funktioniert es, wenn man in klein macht wird die Linie auch klein.

#box{  
border-bottom: 10px solid #ff0000;  
width:100%;  
}	  
  
#box .mitte {  
margin:0 auto;  
min-width:500px;  
max-width:1000px;  
background:#000;  
color:#fff;  
}

Hier kann man es genau sehen.

http://jsfiddle.net/jc9cugtp/1/

Michi

  1. Hi,

    Wenn man den Browser verkleinert, verkleinert sich die Box in der .mitte so wie sie es soll, aber die Linie, die ich mit BORDER gemacht habe wird auch kleiner, aber sie soll eigentlich weiter 100% über die ganze Seite sein

    Ist sie auch – aber 100% sind weniger, also du denkst, weil deine schwarze “Box” über die verfügbare Viewport-Breite hinaus geht.

    Gib deinem Pseudo-Border einfach die gleiche Mindest-Breite wie deiner Box …

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
  2. Ich habe hier einen CSS Code der funktioniert. Doch nun ist mir etwas aufgefallen was  ich mir nicht erklären kann.
    Wenn man den Browser verkleinert, verkleinert sich die Box in der .mitte so wie sie es soll, aber die Linie, die ich mit BORDER gemacht habe wird auch kleiner, aber sie soll eigentlich weiter 100% über die ganze Seite sein:

    Sie ist auch 100%. Du gibst ja auch eine relative Angabe an. Wenn dein Fenster 1000px groß ist, dann sind 100% = 1000px.
    Wenn du das Fenster kleiner machst, sagen wir 300px, dann sind 100%=300px

    1. Om nah hoo pez nyeetz, Gregor!

      Wenn man den Browser verkleinert, verkleinert sich die Box in der .mitte so wie sie es soll, aber die Linie, die ich mit BORDER gemacht habe wird auch kleiner, aber sie soll eigentlich weiter 100% über die ganze Seite sein:

      Sie ist auch 100%. Du gibst ja auch eine relative Angabe an. Wenn dein Fenster 1000px groß ist, dann sind 100% = 1000px.
      Wenn du das Fenster kleiner machst, sagen wir 300px, dann sind 100%=300px

      Das lässt sich aus dem Code nicht ablesen und eine Breitenangabe in Prozent bezieht sich in den allermeisten Fällen nicht auf die Breite des Viewports. Für letzteres gibt es die Einheit vw.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wunde und Wunderhorn.