Vertikale Trennlinie in einem scrollbaren flexbox div-Element

Ich habe ein vertikal zentral anpassbares scrollbares Flexbox-Element, das selbst zwei Spalten haben sollte (ich habe das mit zwei Child-Divs gelöst). Die zentrale Flexbox sollte einen Rahmen und eine zentrale Trennlinie haben.Vertikale Trennlinie in einem scrollbaren flexbox div-Element

Ich kann die zentrale Trennlinie nicht bis zum Ende der scrollbaren Flexbox laufen lassen. Ich habe es mit einem dritten Kind-Div-Element versucht, aber die Linie erscheint nur für die vertikale Ausdehnung der Flexbox.

Wie kann ich zwei Spalten in einer scrollbaren Flexbox mit einem Rahmen und einer zentralen Trennlinie, die bis ganz nach unten verläuft, erstellen?

Vielen Dank für Ihre Hilfe. Hier

ist das Beispiel: https://jsfiddle.net/soliman/0d0tn22x/2/

<body> 
    <div class="wrapper"> 
    <div class="header"> 
     <h1>Header</h1> 
    </div> 

    <div class="content"> 

     <div class="leftContent"> Column 1 
     With a lot of lines. 
     </div> 

     <div class="divider"></div> 

     <div class="rightContent"> Column 2 
     With fewer lines 
     </div> 
    </div> 

    <div class="footer"> 
     Footer 
    </div> 
    </div> 
</body>

CSS:

html, 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background: black; 
    color: red; 
} 

.wrapper { 
    display: flex; 
    /* use the flex model */ 
    height: 100%; 
    flex-direction: column; 
} 

.header { 
    margin: 1em 1em 0 1em; 
} 

.content { 
    flex: 1 1 auto; 
    display: flex; 
    overflow-y: auto; 
    position: relative; 
    min-height: 100px; 
    margin: 0 1em 0 1em; 
    border: 6px double red; 
} 

.content > div { 
    width: 50%; 
    padding: 3%; 
} 

.content > div:first-child { 
    margin-right: 10px; 
} 

.footer { 
    margin: 0 1em 1em 1em; 
} 

.divider { 
    position: absolute; 
    left: 50%; 
    top: 0%; 
    bottom: 0%; 
    border-left: 6px double red; 
}

Quelle

2016-04-11 solimanelefant

Versuchen Sie, diese gemischte Flexbox und CSS Tabellen-Layout. Sie können den Inhaltsbereich als Tabelle und die drei Spalten als Tabellenzellen festlegen, sodass sie immer die gleiche Höhe haben.

Es gibt ein Problem mit dem Ansatz ist - es funktioniert nur richtig, wenn der Inhalt größer als der Container ist, sonst wird die vertikale Linie in der Mitte stoppen. Siehe den anderen Ansatz unten.

jsFiddle

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex: 1; 
 
    overflow-y: auto; 
 
    min-height: 100px; 
 
    border: 1px solid; 
 
} 
 
.wrapContent { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.wrapContent > div { 
 
    display: table-cell; 
 
} 
 
.leftContent, 
 
.rightContent { 
 
    width: 50%; 
 
} 
 
.divider { 
 
    border-left: 1px solid; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <h1>Header</h1> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="wrapContent"> 
 
     <div class="leftContent"> 
 
     <div style="height:500px;">Left</div> 
 
     </div> 
 
     <div class="divider"></div> 
 
     <div class="rightContent"> 
 
     <div style="height:auto;">Right</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <p>Footer</p> 
 
    </div> 
 
</div>

Eine andere Möglichkeit wäre Hintergrundbild für die vertikale Linie eingestellt werden, die dem Mittelpunkt des Inhalts Behälter mit repeat-y, das Bild sei nur ein quadratischer Punkt. Es funktioniert gut, auch wenn der Inhalt kürzer ist als der Container.

jsFiddle

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex: 1; 
 
    display: flex; 
 
    overflow-y: auto; 
 
    min-height: 100px; 
 
    border: 1px solid; 
 
    background: url("http://i.imgur.com/oyQ4xsL.png") center top repeat-y; 
 
    background-size: 1px; 
 
} 
 
.leftContent, 
 
.rightContent { 
 
    width: 50%; 
 
}

<div class="wrapper"> 
 
    <div class="header"> 
 
    <h1>Header</h1> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="leftContent"> 
 
     <div style="height:500px;">left</div> 
 
    </div> 
 
    <div class="rightContent"> 
 
     <div style="height:auto;">right</div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
    <p>Footer</p> 
 
    </div> 
 
</div>

Quelle

2016-04-11 19:06:18 Stickers

Vielen Dank für die Hilfe sehr. Das Problem mit Tabellen ist, dass sie die vertikale Ausdehnung der Flexbox nicht ausfüllen, wenn der Inhalt der Tabelle kleiner als die Flexbox ist. Siehe: https://jsfiddle.net/czhvhz2L/show/ – solimanelefant

Was ist es eigentlich in der Mitte? ist es immer nur eine dünne vertikale Linie? – Stickers

Ja, es sollte nur eine vertikale Trennlinie zwischen den zwei Spalten mit Inhalt sein. – solimanelefant

Vertikale Trennlinie in einem scrollbaren flexbox div-Element

Antwort

Verwandte Themen