在视口中保留固定的div - 内容可滚动吗？

时间：2018-03-01 22:38:34

标签： jquery html css css-position viewport-units

我有一个div，它会在产品添加到购物篮后显示内容。基本上，一旦某人向购物车添加了某些内容，屏幕右上方会出现一个弹出窗口，指向购物篮图标。这项工作正常，但我担心如果客户在篮子中添加了大量产品会发生什么 - 显然它会从页面底部开始运行，这意味着某些内容+结账按钮将会输出观点。

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

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

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

同样，当水平缩放浏览器时，当它变得非常狭窄时，框的左边缘会从屏幕上移开 - 我该如何避免这种情况？我之前使用以下方法解决了类似的问题：

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

但问题是默认情况下div与页面左侧对齐，我需要左对齐。这可能吗？

希望有人可以为我阐明这一点。我已经尝试了vh值，但我认为top: 100px值会导致问题。

3 个答案:

答案 0 :(得分：1)

要防止购物车在调整大小时偏离屏幕左侧，请考虑将width更改为500px，将max-width更改为不超过100%，我建议max-width: calc(100% - 40px);当您在right 30px时获得购物车时

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

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

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

像：

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

**这里是整个代码段（SCSS编译为CSS在这里工作）

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

＆＃13;
＆＃13; 
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();
  });
});
＆＃13; 
/* =================
   #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;
  }
  
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用display: flex;上的flex-direction: column;，max-height: calc(100vh - 100px);和.mini-cart，您可以获得所需的结果：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，因此代码片段无法正常呈现，请在我的答案开头看JSFiddle）

答案 2 :(得分：0)

除.mini-cart上的 overflow: scroll 外，您只需设置 max-height: 100% 。

可以看到here，以及以下内容：

＆＃13;
＆＃13; 
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();
    });
});
＆＃13; 
/* =================
   #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;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题