スクロール可能なフレックスボックスのdiv要素の垂直ディバイダライン

私は垂直方向に適応可能なスクロール可能なフレックスボックス要素を持っています。それ自体は2つの列を持ちます（2つのchild-divでこれを解決しました）。中央のフレックスボックスにはフレームと中央の分割線が必要です。スクロール可能なフレックスボックスのdiv要素の垂直ディバイダライン

スクロール可能なフレックスボックスの一番下まで中央の分割線を移動することはできません。私は3番目の子div要素で試してみましたが、その行はフレックスボックスの垂直範囲にしか現れません。

スクロール可能なフレックスボックスに2つの列を作成し、フレームと中央の分割線を下から下まで連続して実行するにはどうすればよいですか？

ありがとうございました。ここで

は一例です： 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; 
}

出典

2016-04-11 solimanelefant

この混合フレキシボックスとCSSテーブルレイアウトを試してみてください。コンテンツエリアをテーブルとして設定し、3つのカラムをテーブルセルとして設定することができます。そのため、常に同じ高さになります。

アプローチには1つの問題があります。コンテンツがコンテナよりも大きい場合にのみ正しく動作します。そうでない場合は、垂直線が途中で停止します。下部にある他のアプローチを参照してください。

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>

画像は、反復-Yと、コンテンツコンテナの中心にそれを設定し、縦線の背景画像をすることができる使用される他の方法ちょうど正方形のドットである。コンテンツがコンテナよりも短い場合でもうまく動作します。

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>

出典

2016-04-11 19:06:18 Stickers

の助けをありがとうございました。テーブルの問題は、テーブルの内容がフレックスボックスよりも小さい場合に、フレックスボックスの垂直範囲を記入しないことです。参照： https://jsfiddle.net/czhvhz2L/show/ – solimanelefant

実際に真ん中には何がありますか？常に細い垂直線ですか？ – Stickers

はい、コンテンツを含む2つの列の間の垂直の分割線にする必要があります。 – solimanelefant

スクロール可能なフレックスボックスのdiv要素の垂直ディバイダライン

答えて

関連する問題