我正在为我正在为餐馆食品订购网站设计的购物车创建布局。我想要修理购物车，但是当用户将物品添加到购物车时，我需要可以滚动的购物车有溢出。
这只是我尝试使用的实际代码的一个快速而肮脏的示例。
我想做的是设置固定位置div内的相对位置，并使cart id可滚动。
我一直在努力让这项工作工作5个小时，而我似乎无法找到解决方案。
.wrapper {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
position: fixed;
width: 200px;
}
.sidebar {
position: relative;
height: 100%
}
.cart {
overflow-y: auto;
}<div class='wrapper'>
<div class='sidebar'>
<div class='cart'>
<div class='item'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at leo in purus commodo tempor. Praesent ut euismod nunc, id vestibulum dolor. Morbi egestas vel tortor quis imperdiet. Mauris vitae dapibus leo. Pellentesque laoreet gravida dolor, sit
amet suscipit erat consequat in. Curabitur interdum ut enim non consequat. Mauris eget nunc facilisis magna bibendum porttitor quis vitae nibh. Fusce accumsan justo ut vulputate luctus. Nam porta auctor dui eget facilisis. Fusce id tincidunt lectus.
Praesent tristique semper lorem, non vulputate libero commodo ut. Maecenas efficitur imperdiet nisl posuere finibus. Phasellus dapibus sem lorem, vel lacinia ante suscipit eu. Morbi pulvinar ante viverra est laoreet, volutpat ullamcorper magna
pellentesque. Suspendisse vitae augue eget massa mattis aliquam. Donec ac mi in felis finibus cursus. Mauris a molestie lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vehicula enim non elit
elementum hendrerit. Suspendisse vel fermentum ligula, ut vulputate est. Quisque sagittis, velit in rhoncus interdum, justo dui elementum leo, viverra placerat ligula tortor vel justo. Curabitur interdum egestas leo in elementum. Etiam molestie
sit amet tortor et rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum iaculis massa bibendum arcu volutpat egestas. Suspendisse potenti. Aliquam convallis libero nec dapibus dictum.
Suspendisse venenatis velit tellus, sit amet volutpat leo lacinia et. Nulla a ligula blandit, sollicitudin justo a, ornare velit. In pellentesque sem nisl, vitae pulvinar orci euismod a. Aenean egestas, ipsum vitae lacinia volutpat, orci ante
dapibus diam, vitae varius leo nisl ut nibh. Mauris vulputate ac lacus in auctor. Cras facilisis mattis elementum. Pellentesque egestas quam eget massa fringilla, at tincidunt augue pulvinar. Phasellus aliquet a metus et dignissim. Suspendisse
vitae porttitor felis, eu lacinia libero. Donec non enim a dui scelerisque interdum ac vitae nisi. Fusce molestie quam metus, at molestie diam finibus sed. Proin quis diam felis. Integer viverra cursus pretium. Maecenas varius augue sed lacus
porttitor feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt urna vitae lacus placerat, ac rutrum ligula tristique. Sed vitae neque mollis, faucibus orci et, scelerisque nisi. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec commodo lorem felis. Proin et convallis nulla, rutrum congue ante. Donec nunc lacus, rutrum et blandit eget, accumsan vel ipsum. Sed id justo urna. Donec ullamcorper,
justo id fermentum tincidunt, justo arcu eleifend augue, quis consectetur ex est in erat. Pellentesque eleifend a nisl ut scelerisque. Pellentesque ut lectus orci. Donec at lobortis nisl, quis scelerisque velit. Nam arcu sapien, ultricies sit
amet tellus at, blandit ornare neque. Duis congue malesuada erat sit amet placerat. Curabitur viverra ex nec rutrum vulputate. Integer ullamcorper nisi nec euismod efficitur. Duis scelerisque vehicula elit, vitae ultricies nulla sagittis sit amet.
Duis venenatis nulla non sem scelerisque eleifend. Vestibulum ultrices lorem lorem, id molestie mi ultrices sed. Ut hendrerit felis ligula, eu bibendum ante efficitur eget. Duis dui neque, aliquet semper sagittis vel, posuere vitae lorem. Vestibulum
nec ligula at ex luctus molestie et vitae leo. Nullam quis mi volutpat, aliquet erat at, luctus massa.
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您可以设置固定容器内的div，如下所示。你不会需要那个相对的div，我只使用cart和item div作为例子。
.item {
overflow: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<强> jsFiddle
.cart {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
position: fixed;
left: 10px;
top: 10px;
bottom: 10px;
width: 200px;
}
.item {
overflow: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}<div class='cart'>
<div class='item'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at leo in purus commodo tempor. Praesent ut euismod nunc, id vestibulum dolor. Morbi egestas vel tortor quis imperdiet. Mauris vitae dapibus leo. Pellentesque laoreet gravida dolor, sit
amet suscipit erat consequat in. Curabitur interdum ut enim non consequat. Mauris eget nunc facilisis magna bibendum porttitor quis vitae nibh. Fusce accumsan justo ut vulputate luctus. Nam porta auctor dui eget facilisis. Fusce id tincidunt lectus.
Praesent tristique semper lorem, non vulputate libero commodo ut. Maecenas efficitur imperdiet nisl posuere finibus. Phasellus dapibus sem lorem, vel lacinia ante suscipit eu. Morbi pulvinar ante viverra est laoreet, volutpat ullamcorper magna pellentesque.
Suspendisse vitae augue eget massa mattis aliquam. Donec ac mi in felis finibus cursus. Mauris a molestie lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vehicula enim non elit elementum hendrerit.
Suspendisse vel fermentum ligula, ut vulputate est. Quisque sagittis, velit in rhoncus interdum, justo dui elementum leo, viverra placerat ligula tortor vel justo. Curabitur interdum egestas leo in elementum. Etiam molestie sit amet tortor et rhoncus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum iaculis massa bibendum arcu volutpat egestas. Suspendisse potenti. Aliquam convallis libero nec dapibus dictum. Suspendisse venenatis velit tellus,
sit amet volutpat leo lacinia et. Nulla a ligula blandit, sollicitudin justo a, ornare velit. In pellentesque sem nisl, vitae pulvinar orci euismod a. Aenean egestas, ipsum vitae lacinia volutpat, orci ante dapibus diam, vitae varius leo nisl ut nibh.
Mauris vulputate ac lacus in auctor. Cras facilisis mattis elementum. Pellentesque egestas quam eget massa fringilla, at tincidunt augue pulvinar. Phasellus aliquet a metus et dignissim. Suspendisse vitae porttitor felis, eu lacinia libero. Donec
non enim a dui scelerisque interdum ac vitae nisi. Fusce molestie quam metus, at molestie diam finibus sed. Proin quis diam felis. Integer viverra cursus pretium. Maecenas varius augue sed lacus porttitor feugiat. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Proin tincidunt urna vitae lacus placerat, ac rutrum ligula tristique. Sed vitae neque mollis, faucibus orci et, scelerisque nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec commodo lorem felis. Proin et convallis nulla, rutrum congue ante. Donec nunc lacus, rutrum et blandit eget, accumsan vel ipsum. Sed id justo urna. Donec ullamcorper, justo id fermentum tincidunt, justo arcu eleifend augue, quis
consectetur ex est in erat. Pellentesque eleifend a nisl ut scelerisque. Pellentesque ut lectus orci. Donec at lobortis nisl, quis scelerisque velit. Nam arcu sapien, ultricies sit amet tellus at, blandit ornare neque. Duis congue malesuada erat sit
amet placerat. Curabitur viverra ex nec rutrum vulputate. Integer ullamcorper nisi nec euismod efficitur. Duis scelerisque vehicula elit, vitae ultricies nulla sagittis sit amet. Duis venenatis nulla non sem scelerisque eleifend. Vestibulum ultrices
lorem lorem, id molestie mi ultrices sed. Ut hendrerit felis ligula, eu bibendum ante efficitur eget. Duis dui neque, aliquet semper sagittis vel, posuere vitae lorem. Vestibulum nec ligula at ex luctus molestie et vitae leo. Nullam quis mi volutpat,
aliquet erat at, luctus massa.
</div>
</div>
答案 1 :(得分：0)
将此.item添加到您的样式和设置高度，它应该工作。
.wrapper {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
position: fixed;
width: 200px;
}
.sidebar {
position: relative;
height: 100%
}
.cart {
overflow-y: auto;
}
.item{
overflow-y: auto;
height:200px;
}