css - Scrolling div within a non-scrolling div

Question

Current code: http://jsfiddle.net/GDZpm/2/

I would like to have the rightSideDetails class div contents scroll, not the rightSideContainer class div. My attempts have yielded text overflow into the lower division or a visible (but disabled) scroll bar in the content area.

.mainContent {
position:relative;
width:275px;
}
.leftSide {
position:relative;
min-height: 485px;
}
.rightSide {
position:absolute;
top:0px;
left:100px;
}
.rightSideContainer {
height:175px;
overflow:auto;
}
.rightSideHeader {
padding-left:30px;
padding-top:6px;
padding-right:20px;
font-size:10px;
font-weight:bold;
font-size:14px;
}
.rightSideDetails {
padding-left:20px;
padding-top:15px;
padding-right:30px;
font-size:12px;
}

Thank you.

Answer 1

.rightSideDetails {
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 30px;
    font-size: 12px;
    overflow-y: scroll;
    height: 100px;
}

我已经为提到的内容删除overflow: auto;并添加了height规则overflow-y到选择器。div您可以替换这些值以满足您的需求。