XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Scrollbars übersteuern ihren eigenen Div-Container (http://xhtmlforum.de/showthread.php?t=73742)

halloICKEbins2 31.12.2018 16:22

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>

Mein Problem ist, dass die Scrollbars nicht den Container "right2" scrollbar machen, sondern anscheinend den ganzen body-Bereich der Seite!

Ich wünsche schon jetzt einmal allen ein frohes neues Jahr im Vorraus !!!

basti1012 01.01.2019 20:35

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

halloICKEbins2 01.01.2019 22:03

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.

basti1012 02.01.2019 16:30

ok das sagt ja schon mal was. was ist den mit left 1 und 3 und right 1 und 3?
Sollen die eine mindeshöhe haben ? Oder sollen sich alle Container den Platz dann teilen wenn container 2 nix drinne ist ,oder zu wennig drinne ist um die ganze seite auszufüllen ?

halloICKEbins2 02.01.2019 20:24

In right1 und right3 steht eine Text 20px, welcher sozusagen für die Größenbeschränkung denkt. Genauso in left1 und left3. Den Rest soll left2 und right2 bekommen.

halloICKEbins2 08.01.2019 12:29

Mahlzeit,

hat schon jemand eine brauchbare Lösung oder ist es besser wenn ich eine Skizze mache, was ich meine?

basti1012 10.01.2019 17:27

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

halloICKEbins2 10.01.2019 21:50

Ja leider passt es noch nicht...ich muss mir morgen nochmal in Ruhe anschauen und melde mich dann wieder!

basti1012 11.01.2019 09:50

was muss den an mein script jetzt noch geändert werden ?

halloICKEbins2 11.01.2019 14:09

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>

Randfrage: Wie bekomme ich den Text im oben genannten Container 5px von allen Rändern weg...das klappte leider jetzt auch nicht mehr!


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:37 Uhr.

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

© Dirk H. 2003 - 2019