分割背景-当面板展开时停止移动

Question

所以我有一个分裂的背景-顶部是蓝色，底部是白色。我使用这种风格来获得分裂的背景：

​

//accordion - changes colour on open / close

var selectIds = $('#panel1,#panel2,#panel3');
$(function($) {
  selectIds.on('show.bs.collapse hidden.bs.collapse', function() {
    $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
  });
  $(".panel-heading").find("a[data-toggle=collapse]").on('click', function() {
    if ($(this).hasClass('collapsed')) {
      $(this).closest('.panel-group').find('.panel-default').removeClass('open');
      $(this).closest('.panel-default').addClass('open');
    } else {
      $(this).closest('.panel-default').removeClass('open');
    }
  });
});

.gradient {
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#18A9E5, #18A9E5 49.9%, #fff 50.1%, #fff 100%);
}
.split {
  width: 100%;
  /*height:50px;*/
  max-height: 25%;
  padding: 2% 5% 5% 5%;
}
.solid-white {
  background-color: #fff;
  padding-top: 10px;
  padding-right: 3px;
  padding-left: 3px;
  padding-bottom: 0!important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
  h2 {
    padding-left: 25px;
  }
}
.page-section {
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  &.page-section-md {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.panel-body-help {
  background-color: #616161;
  color: white;
}
.panel-default.open {
  background-color: #616161;
  transition: all 0s;
}
.custom-panel {
  .panel-default.open {
    > .panel-heading {
      color: #fff;
      font-weight: bolder;
      background: transparent;
    }
  }
}
.custom-panel {
  .panel-default {
    > .panel-heading {
      background: #fff;
    }
  }
}
.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
  padding: 15px;
}

<section class="page-section page-section-md split gradient">
  <div class="row">
    <div class="col-md-2">
      <h4 class="heading-responsive text-white">
               Welcome
            </h4>
    </div>
  </div>
  <div class="container wrap-md">
    <br />
    <br />
    <div class="col-md-offset-2 col-md-8 solid-white-help">
      <h2 class="heading-responsive thin">Welcome</h2>
      <br />
      <div class="panel-group custom-panel" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
                                <i class="fa fa-plus text-primary"></i> Get started
                            </a>
                        </h4>
          </div>
          <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
                        </h4>
          </div>
          <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
                        </h4>
          </div>
          <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
                        </h4>
          </div>
          <div id="panel4" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
                        </h4>
          </div>
          <div id="panel5" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
                        </h4>
          </div>
          <div id="panel6" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
                        </h4>
          </div>
          <div id="panel7" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                            <a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
                        </h4>
          </div>
          <div id="panel8" class="panel-collapse collapse">
            <div class="panel-body panel-body-help">
              CONTENT
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
  </div>
  <br />
  <br />
</section>

​

因为我在背景中有引导面板，当我展开一个面板时，背景也会移动。(与蓝色一样，当我打开面板时，延伸到较低的位置)。我如何使颜色固定，无论我的背景是什么大小？

https://support.google.com/mail#topic=3394144 <这是一个很好的参考，我正在努力实现的背景，而不是移动时，面板被展开。

这可能是一个非常简单的解决办法，我只是错过了-谢谢你的帮助！蒂娅。

Answer 1

蓝色顶部的高度是由你的背景梯度决定的。梯度类(目前的前49.9%是蓝色的，底部50.1%是白色的)。您可以将.split类的高度设为100 of并溢出:滚动。

.split {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding: 2% 5% 5% 5%;
}

看看这把小提琴：https://jsfiddle.net/wietsedevries/bk4ogp38/3/