XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Box-Model und Scrollen (http://xhtmlforum.de/showthread.php?t=74067)

emmis 23.03.2020 18:19

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

emmis 23.03.2020 21:23

NACHTRAG

... eine, meiner Meinung nach nicht so schne Lsung gefunden. Wrde 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>

https://jsfiddle.net/pooleleven/apmfbxo2/7/

Gibt es da aber nicht ein schnere Lsung?

cloned 24.03.2020 08:01

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 erklrst wie die Seite funktionieren soll?
Erweckt fr mich den Eindruck als ob du jetzt ein starres frames-Design nachbauen willst, eben nur ohne frames?

emmis 24.03.2020 08:37

... ok, ich stell mich wohl auch etwas umstndlich an ;) aber Danke erst einmal fr 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 grsser wird, als der ihn umgebende Container verschwindet der Scrollbalken des "Zeilen" enthaltenden DIVs unter dem umgebenden Container.
Der eigentlich unabhngige "boese Streifen" beeinflusst das Verhalten des "Zeilen" enthaltenden DIVs.
https://www.dropbox.com/s/hhnc46r1ni...ns_f4.png?dl=0
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
https://www.dropbox.com/s/adq6i9apwi...ns_f7.png?dl=0

Ich bin mir jedoch nicht sicher, ob dies nicht auch ohne "table_cell"-Lsung und eleganter gelst werden knnte.

cloned 24.03.2020 10:02

Du verwendest viel zu viele unntige 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 fr deinen Header verwendest dann passt es doch?

Interessehalber die Frage: Was ist der Vorteil dieses "bsen streifen"? Warum wird dieser so speziell behandelt?

emmis 24.03.2020 10:33

Vielen Dank fr 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. ntig, wenn dort per float nebeneinander Links z.B. fr 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/relbplxe5c...lprob.jpg?dl=0
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 ...

cloned 24.03.2020 13:31

Zitat:

Zitat von emmis (Beitrag 554176)
Die festen Breiten sind z.B. ntig, wenn dort per float nebeneinander Links z.B. fr einen Reiter stehen, die nicht Teil des Scrollbereiches sein sollen und auch nicht umgebrochen werden

Wenn du es schon neu programmierst wieso setzt du dann auf 10 Jahre alte Technologien? Verwende flexbox, dann kannst du Elemente nebeneinander stellen ohne dass sie umbrechen. Auch ohne solche fixen breiten.
Oder, falls IE nicht mehr untersttzt werden soll, kannst du sogar grid verwenden.
Floats braucht es eigentlich nur noch um Bilder von Text umflieen zu lassen.
Das nur als Hinweis, natrlich kannst du es auch mit floats umsetzen. Aber falls du den Hinweis direkt am Anfang bekommst ist es vielleicht noch einfacher mglich das zu bercksichtigen. Nachtrglich von float auf flexbox umzustellen ist doch mehr Aufwand.

emmis 24.03.2020 14:50

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 gnstig und zielfhrend. Wenn schon ... denn schon ;)
Danke fr den Tritt!


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:55 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019