立式软盒和jQuery UI的调整(Vertical Flex Boxes and Jquery U

我有两个弯曲箱子一个vetical柔性盒容器。 特底部有一个固定的大小和顶部一个占用空间的其余部分。 这个伟大的工程。

<div id="outer">
    <div id="A">
        Test<br/>        
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
    <div id="B"></div>
</div>

CSS：

body, html{
    width: 100%;
    height: 100%;
}
#outer{
    width: 100%;
    height: 100%;
    background: yellow;
    display: flex;
    flex-direction: columN
}

#A{ 
    height: 20px;
    max-height: 100%;
    width: 100%;
    flex: 2;
    background: #cccccc;
    overflow: auto;
}

#B{
    height: 200px;
    width: 100%;
    background: blue;
}

JS：

$("#B").resizable({
    handles: "n"
});

我我现在做的底部有一个可调整大小与jQuery UI的我得到一个奇怪的行为。 出于某种原因，jQuery UI的不仅设置在底部容器也是“顶”属性的大小（高度）。

有什么我可以做，以保持resiable从设置这个top属性？

http://jsfiddle.net/t6B2e/8/

Answer 1:

你的jQuery设置你的元素中absolute位置。

你可以测试并找出使用!important要忽略一些的jQuery设置CSS的： http://jsfiddle.net/t6B2e/9/

#B{
    height: 200px;
    width: 100%;
    background: blue;
    /* overrides any inline style or javascript style */
    position:relative!important;
    bottom:0!important;
    top:auto!important;
}

文章来源: Vertical Flex Boxes and Jquery Ui resize