Hallo Leute, baut hier jemand Webseiten mit Bootstrap? Ich fange damit gerade erst an und bräuchte einen schnellen Tip, wie ich auf einer Seite mit Tabs den Tab Content so groß mache, dass er exakt die gesamte verfügbare Fläche einnimmt. Meinen Versuch könnt ihr hier bewundern: https://jsfiddle.net/zqj0yfqx/ Wie ihr dort oder im angehängten Bild1 seht, wird am rechten Rand eine unerwünschte Scrollbar erzeugt. Denn anscheinend nimmt der Tab Content (auf height:100% gesetzt) nicht die verfügbare Fläche unter den nav-tabs ein, sondern die Fläche, die einschließlich der nav-tabs verfügbar wäre. Wenn ich dagegen für den Tab Content "height: calc(100% - 50px)" setze, wie im Fiddle auskommentiert, ergibt sich das angehängte Bild2: Die Scrollbar ist zwar weg, doch die 50px sind nur ein Schätzwert für den Platz, der für die nav-tabs reserviert werden muss. Dieser Wert ändert sich je nach Schriftgröße, Browser usw., mit der Folge dass der Content nicht immer bis zum unteren Rand reicht, oder dass die Scrollbar doch wieder eingeblendet wird. Wahrscheinlich könnte ich mit Javascript irgendwie die Höhe der nav-tabs abfragen und damit jeweils die gewünschte Höhe des Tab Contents berechnen und setzen. Ich hoffe aber auf eine reine CSS-Lösung. Danke Jens
Eine Möglichkeit, das zu lösen, wäre vielleicht, dass Du zu dem
1 | <ul class="nav nav-tabs"> |
noch die CSS-Klasse "navbar-fixed-top" hinzufügst; und dann im CSS am Ende des "body"-Bereiches noch "padding-top: 41px" hinzufügst. Ist halt auch suboptimal, weil Du auch bei dieser Lösung dann wieder einen festen Wert wie "41px" eintragen musst - aber die bootstrap-Dokumentation sagt, dass man das so machen soll: > Body padding required > > The fixed navbar will overlay your other content, unless you add padding > to the top of the <body>. Try out your own values or use our snippet below. https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top Ansonsten hättest Du auch z.B. die Möglichkeit, im CSS des Body-Bereiches "overflow: hidden" anzugeben, um die Scrollbar auszublenden.
Joachim S. schrieb: > Eine Möglichkeit, das zu lösen, wäre vielleicht, dass Du zu dem<ul > class="nav nav-tabs"> > noch die CSS-Klasse "navbar-fixed-top" hinzufügst; und dann im CSS am > Ende des "body"-Bereiches noch "padding-top: 41px" hinzufügst. Danke, aber diese Tabs sollen nicht am oberen Rand fixiert sein, sondern das Beispiel im Fiddle wird später in weiteren <div>s geschachtelt sein. > Ist halt auch suboptimal, weil Du auch bei dieser Lösung dann wieder > einen festen Wert wie "41px" eintragen musst Genau, das löst leider überhaupt nichts. > aber die > bootstrap-Dokumentation sagt, dass man das so machen soll: > >> Body padding required >> >> The fixed navbar will overlay your other content, unless you add padding >> to the top of the <body>. Try out your own values or use our snippet below. Soll das heißen, Bootstrap hat keine Lösung für den Fall? Dort wird ja auch nur die Defaultgröße angegeben. Ich dachte, Bootstrap soll responsive sein. Da kann man sich nun mal nicht auf eine default Schriftgröße verlassen. > Ansonsten hättest Du auch z.B. die Möglichkeit, im CSS des > Body-Bereiches "overflow: hidden" anzugeben, um die Scrollbar > auszublenden. Geht auch nicht, denn der Content muss vollständig sichtbar sein, da darf nichts am unteren Rand versteckt sein. Sag mal, weißt du zufällig welches der beste Weg ist, Bootstrap-Benutzer zu erreichen, deren täglich Brot solche Designs sind? Bootstrap nennt einen IRC-channel. Ich dachte das gäbs seit 1-2 Jahrtausenden schon nicht mehr. Ist das deren Ernst, und lohnt es sich, IRC noch einzurichten? Danke Jens
Jens schrieb: > Geht auch nicht, denn der Content muss vollständig sichtbar sein, da > darf nichts am unteren Rand versteckt sein. Aber versteckt wäre doch auch nur dann etwas am unteren Rand, wenn der Inhalt eh nicht komplett auf eine Seite passt - und in diesem Fall bleiben doch eh nur die beiden Möglichkeiten, entweder eine Scrollbar einzublenden oder einen Teil am Ende der Seite schlicht nicht sehen zu können? Anyway, was möglicherweise noch eine Option wäre: Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben. Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten Effekt zu haben. > Sag mal, weißt du zufällig welches der beste Weg ist, Bootstrap-Benutzer > zu erreichen, deren täglich Brot solche Designs sind? Bootstrap nennt > einen IRC-channel. Ich dachte das gäbs seit 1-2 Jahrtausenden schon > nicht mehr. Ist das deren Ernst, und lohnt es sich, IRC noch > einzurichten? Ich würde mal bei stackoverflow anfragen. Da findet man ja eigentlich immer sehr schnell kompetente Hilfe, und letztlich ist das Ganze ja vermutlich eh eher ein allgemeines CSS-Problem, als speziell ein bootstrap-Problem.
Joachim S. schrieb: > Jens schrieb: >> Geht auch nicht, denn der Content muss vollständig sichtbar sein, da >> darf nichts am unteren Rand versteckt sein. > > Aber versteckt wäre doch auch nur dann etwas am unteren Rand, wenn der > Inhalt eh nicht komplett auf eine Seite passt - und in diesem Fall > bleiben doch eh nur die beiden Möglichkeiten, entweder eine Scrollbar > einzublenden oder einen Teil am Ende der Seite schlicht nicht sehen zu > können? Nein, im Tab Content werde ich Children hinzufügen, die sich an das umgebende Element (=Tab Content) anpassen, so dass dieses immer ausgefüllt ist. Wenn aber der Tab Content schon aus der Seite herausragt, merken die Children davon nichts und können sich nicht entsprechend richtig anpassen. > > Anyway, was möglicherweise noch eine Option wäre: > Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben. > Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten > Effekt zu haben. Du meinst, deine Ergänzung in .body { ... } einfügen? Das habe ich hier gemacht: https://jsfiddle.net/Ls4tvupL/ Dennoch sehe ich den Scrollbalken wie vorher. Könntest du das Fiddle sonst einmal mit den vorgeschlagenen Änderungen forken und den Link posten? > Ich würde mal bei stackoverflow anfragen. Da findet man ja eigentlich > immer sehr schnell kompetente Hilfe, und letztlich ist das Ganze ja > vermutlich eh eher ein allgemeines CSS-Problem, als speziell ein > bootstrap-Problem. Danke, das versuche ich mal. Wenn allerdings Bootstrap so gebaut ist, dass das Beispiel nur mit Javascript-Callbacks allgemeingültig gelöst werden kann, sehe ich dies eher als Problem des Boostrap-Designs, das evtl. generelle CSS-Lösungen ausschließt. Danke Jens
Jens schrieb: >> Anyway, was möglicherweise noch eine Option wäre: >> Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben. >> Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten >> Effekt zu haben. > > Du meinst, deine Ergänzung in .body { ... } einfügen? Das habe ich hier > gemacht: https://jsfiddle.net/Ls4tvupL/ > Dennoch sehe ich den Scrollbalken wie vorher. Könntest du das Fiddle > sonst einmal mit den vorgeschlagenen Änderungen forken und den Link > posten? Genau so meinte ich das, ja; und bei mir (Firefox v57) funktioniert dieses Fiddle ohne Änderung bereits jetzt: der Tab-Inhalt mit seinem rotem/blauem Hintergrund erstreckt sich bis über den gesamten gewünschten Bereich, ohne dass Scrollbars angezeigt werden. Dürfte also am Browser zu liegen. Offenbar muss display: flex etc. bei manchen Browsern noch geprefixt werden: "display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; -ms-flex-direction: column; -webkit-flex-firection: column;" https://jsfiddle.net/vahrqk62/
Tatsache, mit Firefox klappt es, wie ich es mir vorstelle. Mit Chrome bleibt die Scrollbar da. Immerhin habe ich nun einen Anhaltspunkt, von dem aus ich weiter recherchieren kann. Vielen Dank! Jens
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.