在视口内保持固定定位的 div - 内容可滚动？

Question

我有一个 div，它会在将产品添加到购物篮后显示内容。基本上，一旦有人向购物车添加东西，屏幕右上角就会出现一个弹出窗口，指向购物篮图标。这行得通，但我担心如果客户将大量产品添加到购物篮中会发生什么 - 显然它会从页面底部跑出，这意味着一些内容 + 结帐按钮将会消失观点。

这是我的工作示例：https://codepen.io/moy/pen/eVXBvP

我很高兴有任何解决方案。我认为如果带有价格 + 按钮的页脚始终保持在视图中，这样只有产品区域是可滚动的，但也许这是不可能的？

我猜这个问题之一是top 值，这意味着很难（不可能？）在.mini-cart 容器上使用max-height: 100%？

此外，当水平缩放浏览器时，框的左边缘变得非常窄时会超出屏幕 - 我该如何避免这种情况？我之前通过使用解决了类似的问题：

position: fixed;
top: 100px;
right: 30px;
left: 30px;
width: auto;
max-width: 500px;

但问题是 div 默认对齐到页面的左侧，我需要左对齐。这可能吗？

我已经尝试了 vh 值，但我再次认为 top: 100px 值会导致问题。

Answer 1

为防止购物车在调整大小时离开屏幕左侧，请考虑将width 更改为500px 和max-width 不超过100%，我建议max-width: calc(100% - 40px); 因为你有购物车right 为 30 像素；

.mini-cart {
    background: white;
    border-top: 4px solid red;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    padding: 15px;
    position: fixed;
    top: 60px;
    right: 30px;
    transition: all .20s;
    z-index: 1000;
    width: 500px;
    max-width: calc(100% - 40px);
}

帮助滚动查看更多项目。您可以让整个购物车滚动到位，或者只是让项目mini-cart__body 滚动并设置一个固定的max-height 并将overflow 设置为自动。注意：我将max-height 设置为30vh（屏幕垂直高度）；进行演示。 80vh 之类的内容对实时站点更有意义。

.mini-cart__body {
    overflow-y: auto;
    padding-right: 30px;
    margin-right: -30px;
    max-height: 30vh;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
}

** 更新：根据作者的 cmets，处理高度较小的屏幕是个好主意。

为此，这里只是一个想法，因为有很多选择...将购物车的 position 从 fixed 更改为 absolute

喜欢：

@media screen and (max-height: 500px) {
  .mini-cart {
    position:absolute;
  }
  .mini-cart__body {
    max-height: inherit;
  }
}

** 这是整个 sn-p（将 SCSS 编译为 CSS 以在此处工作）

注意：某些样式可能在 css 转换中发生了变化。因此，只需使用以下示例。

document.addEventListener('DOMContentLoaded', function() {

  var mn = $('.page-head'),
  core = $('.band'),
  mns = 'page-head-scrolled',
  bit, hdr;

  $(window).resize(function() {

    bit = mn.outerHeight();
    hdr = $('.info-bar').outerHeight();
  })
  .resize().scroll(function() {

    if ($(this).scrollTop() > hdr) {
      mn.addClass(mns);
      core.css('margin-top', bit);
    } else {
      mn.removeClass(mns);
      core.attr('style', '');
    }
  })
  .on('load', function() {

    $(this).scroll();
  });
});

/* =================
   #MIXINS
   ================= */
/**
 * Clearfix
 */
/**
 * Typography
 */
/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */
/* =================
   #BASE
   ================= */
/* Site */
html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

/* Page */
.page {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Content area */
.band {
  padding: 60px 0 30px;
}

.wrap {
  margin: 0 auto;
  max-width: 1000px;
}

/* =================
   #HEADER
   ================= */
/* Info bar */
.info-bar {
  background: black;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 100%;
}

/* Header */
.page-head {
  background: #eee;
  color: #000;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.page-head.page-head-scrolled {
  position: fixed;
  top: 0;
}

/* =================
   #MINI CART
   ================= */
.mini-cart {
  background: white;
  border-top: 4px solid red;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  padding: 15px;
  position: fixed;
  top: 60px;
  right: 30px;
  transition: all .20s;
  z-index: 1000;
  width: 100%;
  max-width: 500px;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mini-cart:before, .mini-cart:after {
  content: "";
  display: table;
}
.mini-cart:after {
  clear: both;
}
.mini-cart:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid red;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: -12px;
  right: 30px;
  width: 0;
}
@media (min-width: 64em) {
  .mini-cart {
    padding: 30px;
  }
}

/**
 * `mini-cart` header (title + close).
 */
.mini-cart__head {
  border-bottom: 2px solid #eee;
  padding-bottom: 30px;
}
.mini-cart__head:before, .mini-cart__head:after {
  content: "";
  display: table;
}
.mini-cart__head:after {
  clear: both;
}

.mini-cart__title {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 0;
}

.mini-cart__close {
  background: none;
  fill: #ccc;
  float: right;
  height: 20px;
  margin-left: 15px;
  padding: 0;
  text-shadow: none;
  width: 20px;
}
.mini-cart__close:hover {
  fill: #333;
}

/**
 * `mini-cart` body (products).
 */
.mini-cart__body {
    overflow-y: auto;
    padding-right: 30px;
    margin-right: -30px;
    max-height: 30vh;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
}

.mini-cart__item {
  border-bottom: 2px solid #eee;
  clear: both;
  padding: 30px 120px 30px 115px;
  position: relative;
}
.mini-cart__item:before, .mini-cart__item:after {
  content: "";
  display: table;
}
.mini-cart__item:after {
  clear: both;
}
.mini-cart__item .u-photo {
  display: block;
  float: left;
  margin-left: -115px;
  width: 100px;
}
.mini-cart__item .p-name {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.mini-cart__item .e-description {
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.mini-cart__item .p-price {
  margin-bottom: 0;
}
.mini-cart__item .qty {
  position: absolute;
  top: 30px;
  right: 0;
  text-align: right;
}

/**
 * `mini-cart` foot (price + button).
 */
/* =================
   #MIXINS
   ================= */
/**
 * Clearfix
 */
/**
 * Typography
 */
/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */
/* =================
   #BASE
   ================= */
/* Site */
html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

/* Page */
.page {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Content area */
.band {
  padding: 60px 0 30px;
}

.wrap {
  margin: 0 auto;
  max-width: 1000px;
}

/* =================
   #HEADER
   ================= */
/* Info bar */
.info-bar {
  background: black;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 100%;
}

/* Header */
.page-head {
  background: #eee;
  color: #000;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}
.page-head.page-head-scrolled {
  position: fixed;
  top: 0;
}

/* =================
   #MINI CART
   ================= */
.mini-cart {
  background: white;
  border-top: 4px solid red;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  padding: 15px;
  position: fixed;
  top: 60px;
  right: 30px;
  transition: all .20s;
  z-index: 1000;
  width: 100%;
  max-width: 500px;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}
.mini-cart:before, .mini-cart:after {
  content: "";
  display: table;
}
.mini-cart:after {
  clear: both;
}
.mini-cart:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid red;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: -12px;
  right: 30px;
  width: 0;
}
@media (min-width: 64em) {
  .mini-cart {
    padding: 30px;
  }
}

/**
 * `mini-cart` header (title + close).
 */
.mini-cart__head {
  border-bottom: 2px solid #eee;
  padding-bottom: 30px;
}
.mini-cart__head:before, .mini-cart__head:after {
  content: "";
  display: table;
}
.mini-cart__head:after {
  clear: both;
}

.mini-cart__title {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 0;
}

.mini-cart__close {
  background: none;
  fill: #ccc;
  float: right;
  height: 20px;
  margin-left: 15px;
  padding: 0;
  text-shadow: none;
  width: 20px;
}
.mini-cart__close:hover {
  fill: #333;
}

/**
 * `mini-cart` body (products).
 */
.mini-cart__body {
  overflow-y: auto;
  padding-right: 30px;
  margin-right: -30px;
}

.mini-cart__item {
  border-bottom: 2px solid #eee;
  clear: both;
  padding: 30px 120px 30px 115px;
  position: relative;
}
.mini-cart__item:before, .mini-cart__item:after {
  content: "";
  display: table;
}
.mini-cart__item:after {
  clear: both;
}
.mini-cart__item .u-photo {
  display: block;
  float: left;
  margin-left: -115px;
  width: 100px;
}
.mini-cart__item .p-name {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.mini-cart__item .e-description {
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.mini-cart__item .p-price {
  margin-bottom: 0;
}
.mini-cart__item .qty {
  position: absolute;
  top: 30px;
  right: 0;
  text-align: right;
}

/**
 * `mini-cart` foot (price + button).
 */
.mini-cart {
    background: white;
    border-top: 4px solid red;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    padding: 15px;
    position: fixed;
    top: 60px;
    right: 30px;
    transition: all .20s;
    z-index: 1000;
    width: 500px;
    max-width: calc(100% - 40px);
}
.mini-cart__total:before, .mini-cart__total:after {
  content: "";
  display: table;
}
.mini-cart__total:after {
  clear: both;
}
.mini-cart__total span {
  float: right;
}

.mini-cart__btn {
  margin-bottom: 0;
}

.mini-cart__total:before, .mini-cart__total:after {
  content: "";
  display: table;
}
.mini-cart__total:after {
  clear: both;
}
.mini-cart__total span {
  float: right;
}

.mini-cart__btn {
  margin-bottom: 0;
}

@media screen and (max-height: 350px) {

  .mini-cart {
    position:absolute;
  }
  .mini-cart__body {
    max-height: inherit;
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">

  <div class="info-bar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <header class="page-head">
    <h3>Main Nav would go in here</h3>
  </header>

  <div class="band">
    <div class="wrap">

      <h4>All Page content follows</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
        <br />
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <br />
        <br />
        <br />
        <br />

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
        <br />
        <br />
        
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
        <br />
        <br />
        <br />
        
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        
        <br />
        <br />
        <br />
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>

<!-- Start #mini-cart -->
<div class="mini-cart">

  <div class="mini-cart__head">
    <a href="#" class="mini-cart__close">Close</a>
    <h4 class="mini-cart__title">Your Basket</h4>
  </div>

  <div class="mini-cart__body">

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

  </div>

  <div class="mini-cart__foot">
    <p class="mini-cart__total">Total <span>£11.00</span></p>
    <a href="#" class="mini-cart__btn btn btn--wide">Checkout</a>
  </div>

</div>
<!-- End #mini-cart -->

Answer 2

在您的.mini-cart 上使用display: flex;、flex-direction: column; 和max-height: calc(100vh - 100px);，您可以获得您想要的结果：See this JSFiddle for SCSS code in action。

flex 确保元素适合容器。为了更加安全，您可以将flex 规则添加到直系后代。我只是提供一个通用的解决方案，您可以在此基础上满足您的确切需求。

我不得不稍微编辑您的.mini-cart__body，添加带有预定义断点的@media 规则，这样滚动条就不会超出容器。

document.addEventListener('DOMContentLoaded', function() {

  var mn = $('.page-head'),
  core = $('.band'),
  mns = 'page-head-scrolled',
  bit, hdr;

  $(window).resize(function() {

    bit = mn.outerHeight();
    hdr = $('.info-bar').outerHeight();
  })
  .resize().scroll(function() {

    if ($(this).scrollTop() > hdr) {
      mn.addClass(mns);
      core.css('margin-top', bit);
    } else {
      mn.removeClass(mns);
      core.attr('style', '');
    }
  })
  .on('load', function() {

    $(this).scroll();
  });
});

* { box-sizing: border-box; }

/* =================
   #MIXINS
   ================= */

/**
 * Clearfix
 */

@mixin clearfix() {
	
	&:before,
	&:after {
		content: "";
		display: table;
	}
	
	&:after {
		clear: both;
	}
}


/**
 * Typography
 */

@mixin font-size($font-size: 16){
font-size : #{$font-size}px;
font-size : #{$font-size / 10}rem; }


/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */

@mixin bp($point) {
  
  $bp2 : "(min-width : 30em)"; 		/* [1] */
  $bp3 : "(min-width : 37.5em)"; 		/* [2] */
  $bp4 : "(min-width : 48em)"; 		/* [3] */
  $bp5 : "(min-width : 64em)"; 		/* [4] */
  $bp6 : "(min-width : 76.250em)"; 	/* [5] */
  $bp7 : "(min-width : 87.5em)"; 		/* [6] */

  @if $point == bp2 {
    @media #{$bp2} { @content; }
  }

  @else if $point == bp3 {
    @media #{$bp3} { @content; }
  }

  @else if $point == bp3 {
    @media #{$bp3} { @content; }
  }

  @else if $point == bp4 {
    @media #{$bp4} { @content; }
  }

  @else if $point == bp5 {
    @media #{$bp5} { @content; }
  }

  @else if $point == bp6 {
    @media #{$bp6} { @content; }
  }

  @else if $point == bp7 {
    @media #{$bp7} { @content; }
  }
}


/* =================
   #BASE
   ================= */

/* Site */

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}

/* Page */

.page {
  height: 2000px;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Content area */

.band {
  padding: 60px 0 30px;
}

.wrap {
  margin: 0 auto;
  max-width: 1000px;
}


/* =================
   #HEADER
   ================= */

/* Info bar */

.info-bar {
  background: black;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 100%;
}

/* Header */

.page-head {
  background: #eee;
  color: #000;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  
  &.page-head-scrolled {
    position: fixed;
    top: 0;
  }
}


/* =================
   #MINI CART
   ================= */

.mini-cart {
	background: white;
	border-top: 4px solid red;
	box-shadow: 0 0 10px rgba(0,0,0,.25);
	box-sizing: border-box;
	@include clearfix;
	padding: 15px;
	position: fixed;
	top: 60px;
	right: 30px;
	transition: all .20s;
	z-index: 1000;
	max-width: 500px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;

    &:before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 8px solid red;
        content: "";
        display: block;
        height: 0; 
        position: absolute;
        top: -12px;
        right: 30px;
        width: 0; 
    }
    
    @include bp(bp5) {
	    padding: 30px;
    }
}


/**
 * `mini-cart` header (title + close).
 */
 
.mini-cart__head {
	border-bottom: 2px solid #eee;
	@include clearfix;
	padding-bottom: 30px;
}

.mini-cart__title {
	@include font-size(18);
	margin-bottom: 0;
}

.mini-cart__close {
	  background: none;
	  fill: #ccc;
    float: right;
    height: 20px;
    margin-left: 15px;
    padding: 0;
    text-shadow: none;
    width: 20px;
    
    &:hover {
        fill: #333;
    }
}


/**
 * `mini-cart` body (products).
 */

.mini-cart__body {
	overflow-y: auto;
  padding-right: 0;
  margin-right:  0;
  
  @include bp(bp5) {
	  padding-right: 30px;
	  margin-right: -30px;
  }
}

.mini-cart__item {
	border-bottom: 2px solid #eee;
    clear: both;
    @include clearfix;
    padding: 30px 120px 30px 115px;
    position: relative;
    
    .u-photo {
	    display: block;
	    float: left;
	    margin-left: -115px;
	    width: 100px;
    }
    
    .p-name {
	    @include font-size(14);
		  margin-bottom: 5px;
    }
    
    .e-description {
	    @include font-size(12);
	    margin-bottom: 5px;
    }
    
    .p-price {
	    margin-bottom: 0;
    }
    
    .qty {
	    position: absolute;
	    top: 30px;
	    right: 0;
	    text-align: right;
    }
}

/**
 * `mini-cart` foot (price + button).
 */

.mini-cart__total {
    @include clearfix;
    color: #333;
    @include font-size(18);
    font-weight: 700;
    margin-bottom: 0;
    padding: 15px 0;
    text-transform: uppercase;
    width: 100%;
    
    span {
	    float: right;
    }
}

.mini-cart__btn {
	margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">

  <div class="info-bar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <header class="page-head">
    <h3>Main Nav would go in here</h3>
  </header>

  <div class="band">
    <div class="wrap">

      <h4>All Page content follows</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
  </div>

</div>

<!-- Start #mini-cart -->
<div class="mini-cart">

  <div class="mini-cart__head">
    <a href="#" class="mini-cart__close">Close</a>
    <h4 class="mini-cart__title">Your Basket</h4>
  </div>

  <div class="mini-cart__body">

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

  </div>

  <div class="mini-cart__foot">
    <p class="mini-cart__total">Total <span>£11.00</span></p>
    <a href="#" class="mini-cart__btn btn btn--wide">Checkout</a>
  </div>

</div>
<!-- End #mini-cart -->

（注意：这是基于 OP 提供的 SCSS，因此 sn-p 将无法正确呈现，请参阅我的答案开头的 JSFiddle）

Answer 3

您只需在.mini-cart 上设置max-height: 100% 和overflow: scroll。

这可以在here 看到，也可以在下面看到：

document.addEventListener('DOMContentLoaded', function() {

  var mn = $('.page-head'),
    core = $('.band'),
    mns = 'page-head-scrolled',
    bit, hdr;

  $(window).resize(function() {

      bit = mn.outerHeight();
      hdr = $('.info-bar').outerHeight();
    })
    .resize().scroll(function() {

      if ($(this).scrollTop() > hdr) {
        mn.addClass(mns);
        core.css('margin-top', bit);
      } else {
        mn.removeClass(mns);
        core.attr('style', '');
      }
    })
    .on('load', function() {

      $(this).scroll();
    });
});

/* =================
   #MIXINS
   ================= */


/**
 * Clearfix
 */


/**
 * Typography
 */


/**
 * Media Queries.
 * 
 * 1. $bp2  =  480px 	(30rem)
 * 2. $bp3  =  600px 	(37.5rem)
 * 3. $bp4  =  768px 	(48rem)
 * 4. $bp5  =  1024px 	(64rem)
 * 5. $bp6  =  1220px 	(76.250rem)
 * 6. $bp7  =  1400px 	(87.5rem)
 */


/* =================
   #BASE
   ================= */


/* Site */

html,
body {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
  padding: 0;
}


/* Page */

.page {
  height: 2000px;
  margin: 0;
  padding: 0;
  position: relative;
}


/* Content area */

.band {
  padding: 60px 0 30px;
}

.wrap {
  margin: 0 auto;
  max-width: 1000px;
}


/* =================
   #HEADER
   ================= */


/* Info bar */

.info-bar {
  background: black;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 100%;
}


/* Header */

.page-head {
  background: #eee;
  color: #000;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

.page-head.page-head-scrolled {
  position: fixed;
  top: 0;
}


/* =================
   #MINI CART
   ================= */

.mini-cart {
  background: white;
  border-top: 4px solid red;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  padding: 15px;
  position: fixed;
  top: 60px;
  right: 30px;
  transition: all .20s;
  z-index: 1000;
  width: 100%;
  max-width: 500px;
  max-height: 100%;
  overflow: scroll;
  /* [1] */
  /* [2] */
  /* [3] */
  /* [4] */
  /* [5] */
  /* [6] */
}

.mini-cart:before,
.mini-cart:after {
  content: "";
  display: table;
}

.mini-cart:after {
  clear: both;
}

.mini-cart:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 8px solid red;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  top: -12px;
  right: 30px;
  width: 0;
}

@media (min-width: 64em) {
  .mini-cart {
    padding: 30px;
  }
}


/**
 * `mini-cart` header (title + close).
 */

.mini-cart__head {
  border-bottom: 2px solid #eee;
  padding-bottom: 30px;
}

.mini-cart__head:before,
.mini-cart__head:after {
  content: "";
  display: table;
}

.mini-cart__head:after {
  clear: both;
}

.mini-cart__title {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 0;
}

.mini-cart__close {
  background: none;
  fill: #ccc;
  float: right;
  height: 20px;
  margin-left: 15px;
  padding: 0;
  text-shadow: none;
  width: 20px;
}

.mini-cart__close:hover {
  fill: #333;
}


/**
 * `mini-cart` body (products).
 */

.mini-cart__body {
  overflow-y: auto;
  padding-right: 30px;
  margin-right: -30px;
}

.mini-cart__item {
  border-bottom: 2px solid #eee;
  clear: both;
  padding: 30px 120px 30px 115px;
  position: relative;
}

.mini-cart__item:before,
.mini-cart__item:after {
  content: "";
  display: table;
}

.mini-cart__item:after {
  clear: both;
}

.mini-cart__item .u-photo {
  display: block;
  float: left;
  margin-left: -115px;
  width: 100px;
}

.mini-cart__item .p-name {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 5px;
}

.mini-cart__item .e-description {
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.mini-cart__item .p-price {
  margin-bottom: 0;
}

.mini-cart__item .qty {
  position: absolute;
  top: 30px;
  right: 0;
  text-align: right;
}


/**
 * `mini-cart` foot (price + button).
 */

.mini-cart__total {
  color: #333;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0;
  padding: 15px 0;
  text-transform: uppercase;
  width: 100%;
}

.mini-cart__total:before,
.mini-cart__total:after {
  content: "";
  display: table;
}

.mini-cart__total:after {
  clear: both;
}

.mini-cart__total span {
  float: right;
}

.mini-cart__btn {
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page">

  <div class="info-bar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <header class="page-head">
    <h3>Main Nav would go in here</h3>
  </header>

  <div class="band">
    <div class="wrap">

      <h4>All Page content follows</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
  </div>

</div>

<!-- Start #mini-cart -->
<div class="mini-cart">

  <div class="mini-cart__head">
    <a href="#" class="mini-cart__close">Close</a>
    <h4 class="mini-cart__title">Your Basket</h4>
  </div>

  <div class="mini-cart__body">

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

    <div class="mini-cart__item h-product">
      <img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
      <h2 class="p-name">Product title</h2>
      <p class="e-description">Short product description</p>
      <p class="p-price">£99.99</p>
      <div class="qty qty--small">QTY</div>
    </div>

  </div>

  <div class="mini-cart__foot">
    <p class="mini-cart__total">Total <span>£11.00</span></p>
    <a href="#" class="mini-cart__btn btn btn--wide">Checkout</a>
  </div>

</div>
<!-- End #mini-cart -->