スクロール後の親divのオーバーフロー時のインナーdivの失われた背景

Question

私は画面のある割合のモーダルを持っています。そのモーダル内には2つの列があります。オーバーフローが発生すると、モーダル全体がスクロールして、オーバーフローする可能性があるので、親コンテナにautoを設定します。

私の問題は、逆の列の1つをスクロールすると背景色が失われてしまうことです。

jsfiddleは、問題をはっきりと示しています。下にスクロールしてください。 https://jsfiddle.net/joshuaohana/m26nster/2/（あなたの窓はの側で両方の列側を持ってするのに十分な幅であることを確認してください）この設定で

<div class="outer"> 
    <div class="inner container-fluid"> 
    <div class="first-col col-xs-6"> 
     col1 data - here's the bg that's disappearing) 
    </div> 
    <div class="second-col col-xs-6"> 
     col2 data 
    </div> 
    </div> 
</div> 

.outer { 
    background-color: gray; 
    min-height: 100%; 
    width: 100%; 
} 

.inner { 
    position: fixed; 
    top: 10%; 
    left: 10%; 
    height: 80%; 
    width: 80%; 
    background-color: white; 
    overflow-y: auto; 
} 

.first-col { 
    background-color: blue; 
    min-height: 100%; 
} 

いずれかの列には、私は下にスクロールすることができますあまりにも大きいコンテンツがある場合、スクロールは、素晴らしい作品。しかし、右の列でオーバーフローが発生すると、折りたたみの下の左の列に青色の背景が失われます。

私は無駄なバックグラウンドアタッチメントを使いこなそうとしました。オーバーフロー：autoを列に置くと背景は正しく動作しますが、1つの列だけをスクロールしたくない場合は、上の例のように両方の列を一緒にスクロールする必要があります。

first-colからheight属性を削除してオーバーフローの原因になっている場合はうまく機能しますが、オーバーフローの原因となっている列に関係なく正しく機能する必要があります。

下にスクロールすると背景色を維持できますか？

Answer 1

投稿全体を修正しました。あなたは、これらの手順を実行する必要があります。

• 削除COL-XS-6の両方からは、一COLと第二-COLをDIV
• が別のdivでそれらをラップし、表示を適用します。テーブルをそれに。

.outer { 
 
    background-color: gray; 
 
    min-height: 100%; 
 
    width: 100%; 
 
} 
 

 
.inner { 
 
    position: fixed; 
 
    top: 10%; 
 
    left: 10%; 
 
    height: 80%; 
 
    width: 80%; 
 
    background-color: white; 
 
    overflow-y: auto; 
 
} 
 

 
.first-col { 
 
    background-color: blue; 
 
    min-height: 100%; 
 
} 
 
.col-container{ 
 
    display:block; 
 
    border-spacing: 15px; 
 
} 
 
.col-container .first-col,.col-container .second-col 
 
{ 
 
display:table-cell; 
 
padding:15px 0; 
 
width:50%; 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="outer"> 
 
    <div class="inner container-fluid"> 
 
    <div class="col-container"> 
 
    <div class="first-col"> 
 
     col1 data - here's the bg that's disappearing) 
 
    </div> 
 
    <div class="second-col"> 
 
     acon ipsum dolor amet landjaeger shankle alcatra spare ribs ball tip. Pork chop kevin chicken meatball prosciutto, shoulder jerky tenderloin brisket pork belly. Pancetta picanha landjaeger strip steak burgdoggen, flank ground round sirloin. Doner salami capicola tri-tip jerky leberkas pork belly short ribs. Shoulder burgdoggen ham, pork loin landjaeger strip steak tri-tip jerky ground round pastrami pig beef. Andouille pastrami pancetta, landjaeger sirloin ball tip tail strip steak tenderloin frankfurter flank corned beef brisket. Picanha pastrami sausage, hamburger porchetta pork chop drumstick beef ribeye chicken pork loin cow meatball short ribs kielbasa. Meatloaf flank andouille alcatra prosciutto shoulder sirloin. Boudin chicken pork loin jerky cupim prosciutto. Ham meatloaf leberkas, chuck shank jowl meatball jerky beef. Flank shoulder biltong short ribs burgdoggen. 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>