我有一个非常好的可调节界面与flexbox一起工作,用户可以调整面板的高度和宽度.但是,我想更改当前使用像素的面板高度来使用百分比,因此当他们更改一个面板时,其他面板会流动.
一切都适用于宽度,但当我使用高度%它会打破.
这是一个显示破碎%的小提琴.
http://jsfiddle.net/59trW/1/
这个小提琴在红色元素上设置了50%的高度,但根本不可见.
这是css
.outer-flex { position: absolute; top: 0; bottom: 0; left:0; right:0; display: flex; -webkit-box-align: stretch; flex-direction: row; } .left-panel { width: 30px; background-color: #5eddd8; } .flex { display: flex; flex:1; -webkit-box-align: stretch; flex-direction: column; background-color: #64b92a; min-height: 1px; } .fixed { height: 20px; background-color: #ecf0f1; } .top-box { height: 30%; background-color: red; } .bottom-box { flex: 1; }
和HTML
this is ok.doesn't movetop boxbottom box
我希望我可以做一个小的改变,让div可以调整%.
您需要为右列添加高度:
http://jsfiddle.net/59trW/2/
.flex { display: flex; flex:1; flex-direction: column; background-color: #64b92a; height: 100%; /* here */ }
此外,-webkit-box-align: stretch
对你没有任何帮助,因为它来自旧的2009年草案(你甚至不在这里使用),而不是当前的规范(同时,拉伸是该属性的默认值).