I want to set .order-container auto resize when footer became taller
.point-of-sale #leftpane {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position:absolute;
left:0;
width:440px;
top:0px;
/*bottom:105px;*/
bottom:0;
border-right: solid 1px #CECBCB;
background-color: white;
}
.point-of-sale #leftpane footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #F0EEEE;
white-space: nowrap;
}
.point-of-sale .order-container{
position: absolute;
top: 0px;
bottom: 232px;
width:100%;
background: #F0EEEE;
}.point-of-sale .order-scroller{
width:100%;
height:100%;
overflow:hidden;
}.point-of-sale .order{
background: #F00;
background: -webkit-linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
background: -moz-linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
background: -ms-linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
background: linear-gradient(0deg,rgba(245,245,245,1),rgba(255,255,255,1), rgba(245,245,245,1));
padding-bottom:15px;
padding-top:15px;
margin-left:16px;
margin-right:16px;
margin-top:16px;
margin-bottom:16px;
font-size:16px;
-webkit-box-shadow: 0px 5px 16px rgba(0,0,0, 0.3);
-moz-box-shadow: 0px 5px 16px rgba(0,0,0, 0.3);
box-shadow: 0px 5px 16px rgba(0,0,0, 0.3);}
.point-of-sale .order .empty{
text-align:center;
margin-top: 15px;
margin-bottom: 5px;
color:#999;
font-weight: normal;
}.point-of-sale .order .summary{
width:100%;
text-align:right;
font-weight: bold;
margin-top:20px;
margin-bottom:10px;
}
.point-of-sale .order .summary .line{
margin-right:15px;
padding-top:5px;
border-top: solid 2px;
border-color:#777;
}
.point-of-sale .order .summary .line.empty{
border-color:#BBB;
color:#999;
}