Vertical Flex Boxes 和 Jquery Ui 调整大小答案

【问题标题】：Vertical Flex Boxes and Jquery Ui resizeVertical Flex Boxes 和 Jquery Ui 调整大小
【发布时间】：2014-04-28 21:51:32
【问题描述】：

我有一个带有两个弹性盒子的垂直弹性盒子容器。底部的一个是固定大小的，顶部的占据了其余的空间。这很好用。

<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 不仅设置了底部容器的大小（高度），还设置了“top”属性。

我能做些什么来避免设置这个顶级属性吗？

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

【问题讨论】：

标签： jquery-ui css flexbox jquery-ui-resizable

【解决方案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;
}

【讨论】：