Inner div verlieren Hintergrund, wenn Überlauf auf Eltern Div nach dem Scrollen

Question

Ich habe eine modale, die ein paar Prozent des Bildschirms ist. Innerhalb dieses Modal sind zwei Spalten. Ich möchte das gesamte modal zusammen scrollen, wenn es Überlauf gibt, so dass ich Überlauf-y: auto auf dem übergeordneten Container habe.

Mein Problem ist, dass ich die Hintergrundfarbe bin zu verlieren, wenn ich auf einem der gegenüberliegenden Spalte nach unten scrollen.

jsfiddle, die das Problem deutlich zeigt, blättern Sie einfach unten auf. https://jsfiddle.net/joshuaohana/m26nster/2/ (stellen Sie sicher, dass Ihre Fenster breit genug ist, beide Spalten nebeneinander haben)

<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%; 
} 

Mit diesem Setup die Scroll funktioniert gut, wenn entweder Spalte Inhalt zu groß ist kann ich nach unten scrollen; Allerdings verliere ich den blauen Hintergrund in der linken Spalte unter der Falte, wenn die rechte Spalte den Überlauf verursacht.

Ich habe versucht, ohne Erfolg mit background-attachment Messing. Wenn ich überlauf: Auto auf den Spalten der Hintergrund funktioniert ordnungsgemäß, aber ich möchte nicht nur eine Spalte scrollen, ich brauche beide Spalten zusammen zu rollen, wie im obigen Beispiel.

Wenn ich das Höhenattribut von First-Col entfernen und es ist derjenige, der den Überlauf verursacht, funktioniert es auch gut, aber ich muss es richtig funktionieren, unabhängig davon, welche Spalte den Überlauf verursacht.

Wie kann ich die Hintergrundfarbe erhalten, wie ich nach unten scrollen?

Answer 1

Ich habe die gesamte Post geändert. Sie müssen diese Schritte tun:

• entfernen col-xs-6 von beiden div ersten col und zweiten col
• sie in einem anderen div wickeln und Anzeige gelten: Tabelle zu.

.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>