在重新确定右侧绝对定位div的同时还有神南极

Question

小提琴：http://jsfiddle.net/scottbeeson/TU6Zw/

HTML：

<div id="itemMap" class="shadow">
    <div class="mapHeader">Open Items</div>
    <div class="mapItem">Test1</div>
    <div class="mapItem">Test2</div>
    <div class="mapItem">Test3</div>
</div>

CSS：

#itemMap {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 230px;
    background-color: #f9f3b7;
    border: 1px solid cornflowerblue;
    font-size: .8em;
    z-index: 10;
}

使用Javascript：

$('#itemMap').resizable({
    handles: 'w',
    minWidth: 180
});

Answer 1

只需要一个包装器即可在Chrome中运行。见http://jsfiddle.net/gUzCU/

HTML

<div id="wrap">
    <div id="itemMap" class="shadow">
        <div class="mapHeader">Open Items</div>
        <div class="mapItem">Test1</div>
        <div class="mapItem">Test2</div>
        <div class="mapItem">Test3</div>
    </div>
</div>

CSS

#wrap {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 230px;
}

#itemMap {
position: absolute;
top: 0px;
bottom: 0px;
width: 230px;
background-color: #f9f3b7;
border: 1px solid cornflowerblue;
font-size: .8em;
z-index: 10;
}