css - 滚动后在父 div 上溢出时内部 div 丢失背景

Question

我有一个占屏幕一定百分比的模态。在该模式中有两列。如果有溢出，我希望整个模式一起滚动，所以我在父容器上有 overflow-y:auto。

我的问题是，一旦我向下滚动到相对的列之一，我就会失去背景颜色。

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

使用此设置，滚动效果很好，如果任一列的内容太大，我可以向下滚动；但是，如果右列导致溢出，我将丢失折叠下方左列的蓝色背景。

我试过弄乱背景附件但无济于事。如果我将 overflow:auto 放在列上，背景可以正常工作，但我不想只滚动一列，我需要两列一起滚动，如上例所示。

如果我从 first-col 中删除高度属性并且它是导致溢出的那个，那么它也能很好地工作，但我需要它正常工作，无论哪一列导致溢出。

如何在向下滚动时保留背景颜色？

Answer 1

我修改了整个帖子。您需要执行以下步骤:

• 从 div first-col 和 second-col 中删除 col-xs-6
• 将它们包裹在另一个 div 中并对其应用 display: table。

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