Зафиксировать часть корзины при прокрутке

[Ch0oJoy]

Здравствуйте! Столкнулся с проблемой, при добавлении множества товаров в корзину, общая информация о цене и кнопки "Перейти в корзину" и "Оформить заказ" опускаются вниз при появлении полосы прокрутки. Как зафиксировать эту часть (выделено черным на скрине)?

 

Подскажите что и где нужно зафиксировать. Спасибо!

 

Вот код из CSS отвечающий за корзину:

#container #cart {
	position: absolute;
	min-width: 270px;
	top: 0;
	right: 0;
	text-align: left;
	z-index: 9999;
}
#container #cart .heading {	
	color: #E52B50;
	background: #E52B50;
	height: 45px;
	position: relative;
	z-index: 1;
	float: right;
	border-left: 1px solid #E52B50;
	border-right: 1px solid #E52B50;
	border-bottom: 1px solid #E52B50;
	-webkit-box-shadow: 0px 0px 3px #dbdbdb;
	-moz-box-shadow: 0px 0px 3px #dbdbdb;
	box-shadow: 0px 0px 3px #dbdbdb;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-khtml-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}
#container #cart .heading a.header-cart {
	background: url('../image/header-cart.png') center top no-repeat;
	float: left;
	padding: 6px 10px 7px 10px;
	height: 32px;
	width: 32px;
	border-right: 1px solid #A6031B;
}
#container #cart .heading a.header-cart:hover {
	background: #EE204D url('../image/header-cart.png') center bottom no-repeat;
}
#container #cart .heading a {
	padding: 15px 10px 15px 15px;
	color: #FFFFFF;
	text-decoration: none;
	float: right;
}
#container #cart .heading a:hover, #container #cart.active .heading a {
	background-color: #EE204D;
	-webkit-border-radius: 0 0 3px 0;
	-moz-border-radius: 0 0 3px 0;
	-khtml-border-radius: 0 0 3px 0;
	border-radius: 0 0 3px 0;
}
#container #cart.active .heading a.header-cart {
	background-color: #EE204D;
}
#container #cart .heading a span {
	background:  url('../image/arrow-down.png') 100% 50% no-repeat;
	padding-right: 15px;	
}
#container #cart .content {
	clear: both;
	display: none;
	position: relative;
	top: -5px;
	padding: 8px;
	min-height: 150px;
	background: #F5F5F5 ;
	border-left: 1px solid #e31837;
	border-right: 1px solid #e31837;
	border-bottom: 1px solid #e31837;
	-webkit-box-shadow: 0px 0px 1px #dbdbdb;
	-moz-box-shadow: 0px 0px 1px #dbdbdb;
	box-shadow: 0px 0px 1px #dbdbdb;
	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-khtml-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}
#container #cart.active .content {
	display: block;
		max-height: 360px;
    overflow-y: auto;
}
.mini-cart-info table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 5px;
}
.mini-cart-info td {
	color: #393939;
	vertical-align: middle;
	text-shadow: 0 1px 0 #F5F5F5;
	padding: 10px 5px;
border-bottom: 1px dashed #e31837;
}
.mini-cart-info .image {
	width: 1px;
}
.mini-cart-info .image img {
	border: 1px solid #EE204D;
	text-align: left;
}
.mini-cart-info .name small {
	color: #393939;
}
.mini-cart-info .quantity {
	text-align: right;
}
.mini-cart-info td.total {
	text-align: right;
}
.mini-cart-info .remove {
	text-align: right;
}
.mini-cart-info .remove img {
	cursor: pointer;
}
.mini-cart-total {
	text-align: right;
	
}
.mini-cart-total table {
	border-collapse: collapse;
	display: inline-block;
	margin-bottom: 5px;
}
.mini-cart-total td {
	color: #393939;
	padding: 4px;
}
#container #cart .checkout {
	text-align: right;
	clear: both;
}
#container #cart .empty {
	padding-top: 50px;
	text-align: center;
}

Скрин 1 - видно что нужная часть ушла вниз

Скрин 2 - нужно зафиксировать выделенное черным

 

[pashast]

Вынести в отдельный div кнопки

[Ch0oJoy]

Вынести в отдельный div кнопки

Спасибо буду пробовать. 

А не подскажите что в таблице Css прописать для этого Div?

[pashast]

Ничего по идее не надо. Надо просто свойство overflow-y: auto с блока .content перенести на таблицу товаров.

Змінено 27 лютого 2016 користувачем pashast