垂直Flex Box和Jquery Ui调整大小 [英] Vertical Flex Boxes and Jquery Ui resize

查看:146
本文介绍了垂直Flex Box和Jquery Ui调整大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个具有两个弹性盒的弹性盒容器。底部一个是固定大小,顶部一个占据空间的其余部分。这很好。

I have a vetical flex box container with two flex boxes. Te bottom one is fixed size and the top one takes up the rest of the space. This works great.

<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不仅设置底部容器的大小(高度),而且设置顶部属性。

I i now make the bottom one resizable with jquery ui i get a strange behaviour. For some reason jquery ui not only sets the size (height) of the bottom container but also the "top" property.

有什么我可以做的来保持可靠性设置此顶级媒体资源?

Is there anything i can do to keep resiable from setting this top property?

http:// jsfiddle。 net / t6B2e / 8 /

推荐答案

您的jQuery设置 code>位置。

Your jQuery set your element in absolute position.

您可以使用!important 测试并找出要覆盖某些CSS由jQuery设置: http://jsfiddle.net/t6B2e/9/

you can test and find out using !important to override some of the CSS set by jQuery: 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 Box和Jquery Ui调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆