在视口内保持固定位置 div - 内容可滚动？
Keeping a fixed positioned div within the viewport - content scrollable?
我有一个 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 值会导致问题。
您只需在 .mini-cart 上设置 overflow: scroll in addition to max-height: 100%。
这个可以看到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 -->
为防止购物车在调整大小时离开屏幕左侧，请考虑将 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 转换中发生了变化。因此，仅使用以下示例。
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 -->
在你的 .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，因此该片段将无法正确呈现，请参阅我回答开头的 JSFiddle）
我有一个 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 值会导致问题。
您只需在 .mini-cart 上设置 overflow: scroll in addition to max-height: 100%。
这个可以看到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 -->
为防止购物车在调整大小时离开屏幕左侧，请考虑将 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 转换中发生了变化。因此，仅使用以下示例。
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 -->
在你的 .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，因此该片段将无法正确呈现，请参阅我回答开头的 JSFiddle）