垂直Flex Box和Jquery Ui调整大小 [英] Vertical Flex Boxes and Jquery Ui resize
问题描述
我有一个具有两个弹性盒的弹性盒容器。底部一个是固定大小,顶部一个占据空间的其余部分。这很好。
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屋!