|
|||
Scrollbars übersteuern ihren eigenen Div-Container
Abend,
ich habe den nachfolgenden Quelltext: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> * { margin: 0; padding: 0; font-family: monospace; font-size: 14px; } html{ height: 100%; width: 100%; display: table; } body { display: table-cell; vertical-align: middle; } .flex-container { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; width: 100vw; height: 100vh; } .navigation { flex-basis: auto; } .maincontent { flex-basis: auto; flex-grow: 1; border: 1px solid red; padding: 5px; } .flex-container-navigation { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; align-items: center; justify-content: center; padding: 2px 5px 2px 5px; } .headline { flex-basis: auto; } .wrapper { display: flex; flex-direction: row; } aside.left-container { display:flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; flex-basis: auto; } div.left-container.left1 { flex-basis: auto; background: #AAAAAA; } div.left-container.left2 { flex-basis: auto; background: #AAAA88; } div.left-container.left3 { flex-basis: auto; background: #AA00CC; } aside.right-container { display:flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; flex-basis: auto; flex-grow: 1; } div.right-container.right1 { flex-basis: auto; background: #AAAA00; } div.right-container.right2 { flex: 1; background: green; overflow-x: auto; overflow-y: auto; white-space: nowrap; } div.right-container.right3 { flex-basis: auto; background: #AAAAFF; } .dropdown { position: relative; display: inline-block; background: white; } .dropdown > input[type="checkbox"] { position: absolute; left: -100vw; } .dropdown > label, .dropdown > a[role="button"] { display: inline-block; padding: 5px; border: 1px solid black; } .dropdown > label:after, .dropdown > a[role="button"]:after { content: "\f0d7"; font-family: FontAwesome; display: inline-block; } .dropdown > ul { position: absolute; z-index: 999; display: block; left: -100vw; top: calc(1.5em + 14px); border: 1px solid black; background: white; padding: 5px; margin: 0; width: calc(100% - 12px); cursor: pointer; } .dropdown > ul li:hover, .dropdown > ul li:focus { background: #A9BCF5; } .dropdown > input[type="checkbox"]:checked ~ ul, .dropdown > ul:target { left: 0; } .list > ul { position: relative; left: 0; display: inline-block; border: 1px solid black; padding: 5px; background: white; width: calc(100% - 12px); } .list > ul > li{ list-style:none; } button{ font-size: 14px; font-family: monospace; padding: 0px; width: 100%; left: 0; border: 0px; background: white; text-align: left; } button:hover{ background: lightblue; } </style> </head> <body> <FORM target="_self" action="" method="post"> <div class="flex-container"> <div class="navigation"> <div class="flex-container-navigation"> <div class="headline"> <button type="submit" name="headline" value="" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <p style="font-size: 30px; font-family: Coolvetica; font-weight: bold; margin: 0px; display: inline;">HEADLINE</p> </button> </div> </div> </div> <div class="maincontent"> <div class="wrapper"> <aside class="left-container"> <div class="left-container left1"> <div class="dropdown"> <input type="checkbox" id="my-dropdown" value="" name="my-checkbox"> <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label> <ul> <li> <button type="submit" name="b1" value="file1" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <p style="font-size: 14px; margin: 0px; display: inline;">file1</p> </button> </li> <li> <button type="submit" name="b1" value="file2" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <p style="font-size: 14px; margin: 0px; display: inline;">file2</p> </button> </li> <li> <button type="submit" name="b1" value="filename länger als normal" style="border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer;"> <p style="font-size: 14px; margin: 0px; display: inline;">filename laenger als normal</p> </button> </li> </ul> </div> </div> <div class="left-container left2"> <div class="list"> <ul> <li> <button type="submit" name="b2" value="b2">text1</button> <button type="submit" name="b2" value="b2">text2</button> <button type="submit" name="b2" value="b2">text3</button> <button type="submit" name="b2" value="b2">text4</button> </li> </ul> </div> </div> <div class="left-container left3"> left3 </div> </aside> <aside class="right-container"> <div class="right-container right1"> right1</div> <div class="right-container right2"> <div style="height: 100%; width: 100%;"> Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>Das ist eine ziemliche lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange, lange Textzeile, welche nicht umgebrochen werden soll <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> </div> <div class="right-container right3"> right3 </div> </aside> </div> </div> </div> </FORM> </body> </html> Ich wünsche schon jetzt einmal allen ein frohes neues Jahr im Vorraus !!! Geändert von halloICKEbins2 (31.12.2018 um 17:26 Uhr) |
Sponsored Links |
|
||||
so ganz verstehen tue ich das nicht was du vor hast.Würde das wahrscheinlich dann auch anders machen.
Mit etwas rum fummeln habe ich ertstmal so gemacht https://codepen.io/basti1012/pen/OrOZYj?editors=1000 doch wie gesagt ,erklär doch mal was du genau vor hast dann kann man das mal anders machen ,bzw dann genuer anpassen |
Sponsored Links |
|
|||
Ziel ist, dass alles auf eine Seite passt.
Das bedeutet, dass right2 (und left2) soweit gestreckt wird, dass es die Seite auf 100% auffüllt. Ist der Inhalt von right2 (und left2) kleiner als 100% dann ohne Scrollbar und wenn der Inhalt größer ist dann mit. Dabei soll der Text der Zeilen in right2 nicht umgebrochen werden. Falls noch Unklarheiten sind melde dich einfach nochmal, dann mache ich eine Skizze. |
|
||||
kuck mal ob du damit was anfangen kannst
https://codepen.io/basti1012/pen/vvzoBN?editors=1100 ist auch nicht optimal aber kommt der sache schon mal näher |
|
|||
Leider ja... ich habe es jetzt mal so gestaltet, dass wenn im div-Container(unter right2) nichts steht, dass er den div auf 100%-Höhe und Weite in seinen Grenzen setzt --> So soll er leer aussehen.
Ziel ist jetzt, dass wenn Text dazu kommt, dass sich nichts verschiebt und die Scrollbars vom oben genannten Div-Container mit eingeblendet werden um den Text zu scrollen. HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <title>Flexlauout</title> <style> * { margin: 0; padding: 0; font-family: monospace; font-size: 14px; } .flex-container { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; width: 100vw; height: 100vh; } .maincontent { flex-basis: auto; flex-grow: 1; border: 1px solid red; padding: 5px; } .navigation { hmax-height:60px; display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: center; justify-content: center; padding: 2px 5px 2px 5px; } #but1{ font-size: 30px; font-family: Coolvetica; font-weight: bold; text-align:center; border: 0px; cursor: pointer; } .wrapper { display: flex; flex-direction: row; min-height:calc(100vh - 60px); } aside.left-container { display:flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; flex-basis: auto; flex-grow: 1; } div.left-container.left1 { background: #AAAAAA; } div.left-container.left2 { flex: 2 1 auto; align-self: flex-start; background: #AAAA88; } div.left-container.left3 { justify-content:flex-end; background: #AA00CC; } aside.right-container { display:flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: column; flex-basis: auto; flex-grow: 1; } div.right-container.right1 { border: 1px solid black; padding: 5px; } div.right-container.right2 { flex: 1; border: 1px solid black; margin-top: 5px; padding: 0px; } div.right-container.right3 { border: 1px solid black; margin-top: 5px; padding: 5px; } .dropdown { position: relative; display: inline-block; background: white; } .dropdown > input[type="checkbox"] { position: absolute; left: -100vw; } .dropdown > label, .dropdown > a[role="button"] { display: inline-block; padding: 5px; border: 1px solid black; } .dropdown > label:after, .dropdown > a[role="button"]:after { content: "\f0d7"; font-family: FontAwesome; display: inline-block; } .dropdown > ul { position: absolute; z-index: 999; display: block; left: -100vw; top: calc(1.5em + 14px); border: 1px solid black; background: white; padding: 5px; margin: 0; width: calc(100% - 12px); cursor: pointer; list-style:none; } .dropdown > ul li:hover, .dropdown > ul li:focus { background: #A9BCF5; } .dropdown > input[type="checkbox"]:checked ~ ul, .dropdown > ul:target { left: 0; } .left2 >.list{ border: 1px solid black; padding: 5px; background: white; } .list > ul > li{ list-style:none; } button{ font-size: 14px; font-family: monospace; padding: 0px; width: 100%; left: 0; border: 0px; background: white; text-align: left; } button:hover{ background: lightblue; } #but2,#but3,#but4{ border: 0px; margin: 0px; padding: 0px; background: none; cursor: pointer; } </style> </head> <body> <form target="_self" action="" method="post"> <div class="flex-container"> <div class="navigation"> <button id="but1" type="submit" name="headline"> HEADLINE </button> </div> <div class="maincontent"> <div class="wrapper"> <aside class="left-container"> <div class="left-container left1"> <div class="dropdown"> <input type="checkbox" id="my-dropdown" value="" name="my-checkbox"> <label for="my-dropdown" data-toggle="dropdown"> Alle anzeigen </label> <ul> <li> <button type="submit" name="b1" value="file1" id="but2"> <p>file1</p> </button> </li> <li> <button type="submit" name="b1" value="file2" id="but3"> <p>file2</p> </button> </li> <li> <button type="submit" name="b1" value="filename länger als normal" id="but4"> <p>filename laenger als normal</p> </button> </li> </ul> </div> </div> <div class="left-container left2"> <div class="list"> <ul> <li> <button type="submit" name="b2" value="b2">text1</button> <button type="submit" name="b2" value="b2">text2</button> <button type="submit" name="b2" value="b2">text3</button> <button type="submit" name="b2" value="b2">text4</button> </li> </ul> </div> </div> <div class="left-container left3"> left3 </div> </aside> <aside class="right-container"> <div class="right-container right1"> right1</div> <div class="right-container right2"> <div style="background: lightgreen; border: 0px; padding: 0px; overflow: auto; height: 100%; width: 100%; white-space: nowrap;"> Das ist ein ziemliche lange Zeile mit viel viel viel viel viel viel viel viel viel viel viel viel Text. <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen <br>mehr Zeilen </div> </div> <div class="right-container right3"> right3 </div> </div> </aside> </div> </div> </div> </form> </body> </html> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundbild via css sprite dynamisch am Div Container anpassen. | BallaBalla07 | CSS | 2 | 04.06.2013 16:40 |
Website Konstrukt - Div Container | polest | (X)HTML | 2 | 27.06.2010 18:55 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
div container verschachteln | blau | CSS | 2 | 05.12.2006 20:44 |