Question

我有一个带有两个柔性盒的柔性盒子容器。底部的一个是固定尺寸，顶部一个占据了剩余的空间。这很有效。

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

我能做些什么来保持设置这个顶级属性的可靠性吗？

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;
}

垂直Flex盒和Jquery Ui调整大小

1 个答案: