滚动

Question

我的模态是屏幕的一定百分比。在该模态中有两列。如果有溢出，我希望整个模态一起滚动，所以我在父容器上有溢出-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中删除了height属性并且它是导致溢出的那个，那么它也可以正常工作，但我需要它才能正常运行，无论哪个列导致溢出。

当我向下滚动时，如何保留背景颜色？

Answer 1

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

• 从div first-col和second-col
中删除col-xs-6
• 将它们包装在另一个div中并将display：table应用于它。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;