|
|||
Box-Model und Scrollen
Hallo Forum,
ich stelle gerade ein Uralt-Projekt von Frames und Single-File um. Der Versuch hier das BoxModel zu verwenden läuft an sich ganz gut. Ausgang ist hier ein 2-spaltiges Design mit einer Fixen und einer variablen Spalte. In der variablen Spalte funktioniert alles wie gedacht, wenn man diese Spalte komplett scrollen lässt, wenn es mehr Inhalt hat als jene Spalte fassen kann. ABER: Ich hätte jetzt ganz gern in der variablen Spalte 2 Boxen untereinander, in der z.B. - die obere Box eine feste Höhe hat und für den Inhalt eine min-width gilt und in keinem Fall gescrollt werden soll - die untere Box eine variable Höhe hat und in der gescrollt werden soll, sobal die Inhalte zu gross für die Box werden. Das funktioniert auch richtig gut ... solange man den Browser nicht schmaler zieht als die obere Box Platz durch die feste Breite an Platz benötigt. Wirds schmaler, verschwindet der vertikale Scrollbalken. Irgendwie erscheint mir das Ganze auch (fast) logisch aber ich finde keinen Weg dies aufzubrechen. In der jsfiddel habe ich mal durch Reduktion aus dem Gesamtprojekt versucht etwas Verständliches zusammenzustellen. Dort lässt sich das Verhalten auch recht schön nachvollziehen. https://jsfiddle.net/pooleleven/apmfbxo2/4/ Vielleicht kann jemand einen Denkanstoss geben ... LG |
Sponsored Links |
|
|||
NACHTRAG
... eine, meiner Meinung nach nicht so schöne Lösung gefunden. Würde auch mit nem verschachteltem absolut-div in einem 100% breiten relative-div funktionieren. HTML-Code:
<div style="position:relative; width:100%; height:45px; background-color:#F00;"> <div style="display: table-cell; width:850px; height:inherit; ">BOESER STREIFEN</div> </div> Gibt es da aber nicht ein schönere Lösung? |
Sponsored Links |
|
|||
Ehrlich gesagt habe ich keine Ahnung was genau dein Problem ist und was du erreichen willst.
Kannst du vielleicht eine skizze erstellen wo du anschaulich erklärst wie die Seite funktionieren soll? Erweckt für mich den Eindruck als ob du jetzt ein starres frames-Design nachbauen willst, eben nur ohne frames? |
|
|||
... ok, ich stell mich wohl auch etwas umständlich an aber Danke erst einmal für die schnelle Reaktion!
Wenn man in der Fiddle: https://jsfiddle.net/pooleleven/apmfbxo2/4/ den Ausgabebereich horizontal so klein zieht, dass der rote (boese) Streifen grösser wird, als der ihn umgebende Container verschwindet der Scrollbalken des "Zeilen" enthaltenden DIVs unter dem umgebenden Container. Der eigentlich unabhängige "boese Streifen" beeinflusst das Verhalten des "Zeilen" enthaltenden DIVs. https://www.dropbox.com/s/hhnc46r1ni...ns_f4.png?dl=0 In der Fiddle: https://jsfiddle.net/pooleleven/apmfbxo2/7/ ergibt sich das korrekte Bild: Der Scrollbalken bleibt sichtbar, das "Zeilen" enthaltende DIV wird trotz der Breitenangabe im "Bosen Streifen" richtig skaliert: https://www.dropbox.com/s/adq6i9apwi...ns_f7.png?dl=0 Ich bin mir jedoch nicht sicher, ob dies nicht auch ohne "table_cell"-Lösung und eleganter gelöst werden könnte. |
|
|||
Du verwendest viel zu viele unnötige divs. ein div, welches dann nur ein weiteres div als direktes Unterelement hat kann weg.
Zweitens: Warum werden fixe breiten verwendet? Wenn du statt width max-width im ersten Beispiel für deinen Header verwendest dann passt es doch? Interessehalber die Frage: Was ist der Vorteil dieses "bösen streifen"? Warum wird dieser so speziell behandelt? |
|
|||
Vielen Dank für die Antwort:
Die restlichen Ebenen enthalten ebenfalls Elemente, die ich zur Reduktion entfernt habe. So gesehen ... liegts Du aber absolut richtig, Da ist noch viel mehr ... Die festen Breiten sind z.B. nötig, wenn dort per float nebeneinander Links z.B. für einen Reiter stehen, die nicht Teil des Scrollbereiches sein sollen und auch nicht umgebrochen werden, sondern dann einfach nur nicht mehr sichtbar sein sollen, wenn der Browser schmaler gezogen wird. https://www.dropbox.com/s/gy04o0ehuy...lprob.png?dl=0 Nachtrag wegen der Frames: Es ist keine "Webseite", sondern eine Anwendung ... zu der es auch eine extra umgesetzte Mobil-Variante geben wird ... also ohne jede Form eines responsive Designs ... Geändert von emmis (24.03.2020 um 11:41 Uhr) |
|
|||
Zitat:
Oder, falls IE nicht mehr unterstützt werden soll, kannst du sogar grid verwenden. Floats braucht es eigentlich nur noch um Bilder von Text umfließen zu lassen. Das nur als Hinweis, natürlich kannst du es auch mit floats umsetzen. Aber falls du den Hinweis direkt am Anfang bekommst ist es vielleicht noch einfacher möglich das zu berücksichtigen. Nachträglich von float auf flexbox umzustellen ist doch mehr Aufwand. |
|
|||
Du hast vollkommen Recht. Die Hoffnung hier ein Mix aus Floats im Kleinen und und Flex im Grossen (statt der Frames) ist wohl doch nicht so günstig und zielführend. Wenn schon ... denn schon
Danke für den Tritt! |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Rand beim Box Model | Argon007 | CSS | 2 | 20.06.2010 20:15 |
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? | damonster | CSS | 12 | 27.08.2008 16:56 |
IE 6 Box Model Bug | trequ | CSS | 0 | 11.12.2007 10:55 |
Kniffliges Layout mit float | Roadrunnerle | CSS | 6 | 14.03.2006 12:26 |
#boxes a:hover.info: 2.posting mit css !!! | marioN | CSS | 5 | 25.01.2004 18:04 |