Weißer Balken beim Resizen von Website

Aus gegebenem Anlass: Sichert eure Backupcodes wenn ihr die Zwei-Faktor-Authentifizierung aktiviert habt!

Infos dazu findet ihr nochmal hier

  • Moin,


    ich habe nach längerer Zeit mal wieder eine kleine Website mit HTML und CSS gebaut, ich bin mit dem Ergebnis auch soweit ziemlich zufrieden, allerdings ist mir heute ein Fehler aufgefallen, für den ich bis jetzt leider keine Lösung gefunden habe.


    Wenn ich die Website im Browser mit Fenstermodus öffne, oder die Seite manuell durch ziehen der Ränder verkleinere, erscheint ein weißer Balken im unteren Bereich der Website und bedeckt einen Button und einige Icons.

    Der Button ist anklickbar, der Text im Balken ist auch markierbar, aber eben nicht sichtbar.


    Ich habe die Website mit Beispiel-Texten und Bildern auf meinen Webserver geladen, ansehen kann man das unter http://n-alker.de


    HTML Source:



    CSS Source:



    Hat jemand ne Idee woran das liegt und wie ichs lösen kann?


    Bin über jede Hilfe dankbar!


    Grüße,


    DasBrot

  • Code
    1. .h-md-100 {
    2.     height: 100vh;
    3. }

    Ist dein Problem, du gibst die Höhe mit der Bildschirmhöhe an (bzw. die des Browserfensters), wird das Fenster verkleinert schiebt sich der Inhalt über die Klasse und ist durch weißen Text auf weißen Hintergrund schlicht nicht lesbar.

    (Wenn man den Browser verkleinert hast du übrigens 2 Scrollbalken am rechten Bildschirmrand, da wirste irgendwas mit overflow verhauen haben)

  • Alles ein wenig unglücklich verpackt.

    Dadurch wirkt deine h-md-100 wie ein Killer.


    Setz lieber HTML & Body auf 100vh und erstelle dann eine 100%-div dessen overflow Eigenschaft scroll ist.

    Ist leider immer etwas doof mit Frameworks, die sind nunmal nicht zu 100% für das optimiert was man haargenau vorhat

    500x370.png