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
