Scrollbars übersteuern ihren eigenen Div-Container (Lösung bitte ohne JavaScript)

  • Ich habe das Problem, dass wenn right2 scrollbar wird, verschiebt sich alles.


    Ziel ist, dass right2 immer komplett weiß ausgefüllt ist und wenn notig scrollbar wird, ohne das sich irgendetwas schiebt. Der Text in right2 darf nicht brechen - weshalb der Container scrollbar werden soll, wenn der Text den Rand des Bildschirms erreicht.


    Und das alles ohne JavaScript! Gibt es dafür eine Lösung?


  • Ein Versuch... ergänze/korrigiere mal in deinem CSS folgendes:


    Validiere mal deinen Code.. da sind ein paar Fehler drin. Die haben aber wohl nichts mit deinem Problem zu tun.

  • basti1012: Mahlzeit und danke für den Tipp! Habs gerade geändert.


    - - - Aktualisiert - - -


    Sailor:


    Ist besser aber noch nicht optimal:



    Probleme:
    1.) Es verschwindet auf der rechten Seite ein wenig Rand.
    2.) Wenn noch mehr Zeilen dazukommen verschwindet left3 und right3 aus dem Bildschirm, egal ob in flex-container noch overflow-y: hidden; geschrieben wird.


    Ich glaube .right2 {background-color: white;} ist in meinem Fall nicht so optimal, da right2 grün bleiben soll, wenn keine Datei geladen wird!

  • Mit den nachfolgenden Zeilen + deine Zeilen vom Anfang sieht es jetzt so aus:


    HTML
    1. * {
    2. box-sizing: border-box;
    3. }
    4. .flex-container {
    5. overflow-y: hidden;
    6. }



    Also left3 und right3 sind noch nicht ganz drauf! - Als Anhalt: lasse ich navigation weg ist alles drauf!


  • Ja... ist bei mir auch so. Sieht so aus, als würde dieses Div bei der 'height-Berechnung' vom Browser nicht berücksichtigt, denn in etwa um diese Höhe ragen left3 und right3 nach unten über die sichtbare Anzeige hinaus. Sehr seltsam... eine Lösung dafür habe ich aber nicht.
    Poste nochmal deinen kompletten Code im jetzigen Stand - vielleicht hat ja sonst jemand eine Idee, woran das liegen könnte.


    - - - Aktualisiert - - -


    Eine 'Bastellösung' hätte ich.
    Das <div class="navigation"> ... </div> im Quellcode vor das <div class="flex-container"> positionieren - dann ist es aus dem Flex raus.
    Im CSS für .navigation

    HTML
    1. .navigation {
    2. position: fixed;
    3. top: 0px;
    4. left: 0px;
    5. width: 100%;
    6. height: 20px;
    7. }


    Dann für .maincontent...

    HTML
    1. .maincontent {
    2. display: flex;
    3. padding: 5px;
    4. height: calc(100vh - 20px);
    5. width: 100vw;
    6. margin-top: 20px;
    7. }


    Nicht besonders hübsch... aber sollte funktionieren:

  • Hier jetzt der komplette Quellcode, ohne die Änderung der navigation vor dem flex-container:



    Problem ist die feste Größe von Navigation und damit die uneigenständige Skalierung bei der unschönen Lösung!!! Wenn die Headline länger wird und umgebrochen wird bei Verkleinerung des Browserfenster schiebt sich die Headline in right1 und left1.

  • Zitat

    Problem ist die feste Größe von Navigation und damit die uneigenständige Skalierung bei der unschönen Lösung!!!


    Dem könnte an mit MediaQueries abhelfen... vorausgesetzt, dass die Inhalte der Headline nicht dynamisch erzeugt werden.


    Ansonsten bin ich leider ziemlich ratlos - die Höhe des Navi-Div im Flex-Container wird vom Browser nicht berücksichtigt und somit 'überscrolled' die Anzeige um die Höhe der Navigation.

  • 2.) Wenn noch mehr Zeilen dazukommen verschwindet left3 und right3 aus dem Bildschirm, egal ob in flex-container noch overflow-y: hidden; geschrieben wird.



    was meinst du mit mehr Zeilen dazu kommen ?
    Ich kann das problem nicht nachstellen bei mir kommt der Fehler nicht .
    Verstehe ich gerade nicht.
    Wenn ich deinen letzten Code mal gerade bei codepen rein kopiere ist alles bestens.
    Ich teste mal probe seite seite auf den Server. Sowas macht mich doch bekloppt.


    Edit: Auf dem Server sieht auch alles gut aus bei mir. Kannst du mal erklären was du mit den zeilen meinst? Habe schon mehr zeilen in left1 und 2 undin right2 rein gemacht aber bis jetzt tut sich bei mir nix negatives.
    Ich glaub mein Browser geht kaputt.Bzw beide

  • @basti: auf dem Bild ist right3 und left3 fast nicht mehr zu sehen...mit zeilen dazukommen, meinte ich, dass right2 vertikal scrollbar wird...also mehr Zeilen sind als auf einem Bildschirm darstellen werden kann!



    Sailor: Ich weiß nicht ob es MediaQueries klappt??? - Wenn ich den Container der headline auf eine feste Größe begrenzen und dann 8 Buttons reinlegen, welche bei Verkleinerung des Browserfenster umbrechen müssen! - Geht das dann?

  • Das sollte keine große Hürde sein... man muss halt testen bei welcher Bildschirmbreite der Zeilenumbruch erfolgt und dann an diesem Punkt eine Mediaquery erstellen, die dann die Hohe des Nav-Containers, das notwendige margin für den Flex-Container und die errechnete Höhe diesen Container regelt.

  • Darüber gibt es eine beinahe unendliche Fülle von Informationen und Tutorials im INet... einfach mal nach Media Queries suchen.
    Ist aber echt kein Hexenwerk... wenn du die Breite XXXXpx ermittelt hast, ab der andere Einstellungen gelten sollen, dann notiere einfach am Ende deines CSS..

    HTML
    1. @media screen and (max-width: XXXXpx) {
    2. }


    Und zwischen diese {} dann das, was ab dieser Breite anders sein soll.


    Sollte eine Mediaquery nicht reichen, weil irgendwann durch Zeilenumbruch noch mehr Zeilen entstehen, kann man auch weiter Mediaqueries mit anderen Werten anhängen.

  • Hallo,
    vielleicht kannst du das hier gebrauchen. So als Basis.


    @edit Hab es neu angepast. Hoffe, dass damit deine Probleme gelöst sind.

    6 Mal editiert, zuletzt von djheke () aus folgendem Grund: Verschlimmberssert

  • @basti: auf dem Bild ist right3 und left3 fast nicht mehr zu sehen...mit zeilen dazukommen, meinte ich, dass right2 vertikal scrollbar wird...also mehr Zeilen sind als auf einem Bildschirm darstellen werden kann!


    Kann das sein das meine Browser Schrott sind? Ist das hier bei euch auch so?
    https://basti1012.bplaced.net/…ordner=forum-hilfe&id=492
    bei mir steht da nix über .

    Ich habe das in der letzten zeit irgendwie öfters das bei mir alles anders dargestellt wird . Das wahr eigentlich noch nie so schlimm.
    Nur was kann das sein das bei allen Browser alles gut aussieht ?
    Also wenn das bei euch auf den Links auch alles unten verschwindet dann muss ich mal mit mein Browser problem ein Thema auf machen weil das ist ja nicht mehr normal.
    Es lief ja mal alles bestens.


    Danke für die hilfe

  • djheke: Ich bin immer daran interessiert...leider arbeitest du mit relativen Breiten, was zu horizontalen Scrollbars im Feld der Dateiauflistung führt (siehe Screenshot) ...ich würde es gerne so habe, dass das Feld immer so breit ist wie der längste Dateiname bzw. der längste Ordnername! Den Rest soll das Feld mit dem Dateiinhalt bekommen.


    Bei Verkleinerung des Fensters schiebt sich die Schrift über den Container (status) hinaus. Wenn du unter den status-div einen weiteren Container einfügst mit zwei Zeilen sieht man dies besonders auch bei Maximierung des Fensters.



    Ich habe die Hoffnung es so reponsiv wie möglich zu gestalten, ohne feste Größen zu benutzen. Ziel soll später auch noch sein die Schriftgrößen zu ändern und der Rest passt sich dann halt an :roll:.


    Mit den MediaQueries werde ich am Montag mal rumprobieren!