I've been trying to do split pane resizing using the CSS3 property.
Here is the code:
<style>
div.left, div.right {float: left; outline: solid 1px #ccc;
resize: both; overflow: auto;}
div.left {width: 20%}
div.right {width: 80%}
</style>
<div class="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
The problem is if i resize the left div, the right div won't shrink and its being pushed to the bottom. Are there any other ways that I can make the split pane without using the javascript?
Say, if it can't be done using CSS3 and really need to use the javascript, the javascript should be minimal if can.
Thank you.
I'm not sure why you're expecting the other element to resize - there doesn't appear to be any relationship between them in your markup?
Assuming you're targeting WebKit and Firefox development snapshots, this should do most of what you're interested in:
display: box
(using appropriate vendor prefixes) box-flex: 1
(again with appropriate vendor prefixes ) Here's a working example , works better in Chrome than Firefox - if you need any other browsers supported then you'll need a JavaScript solution.
--edit:
Just got an upvote on this old answer, the old example doesn't work with the new version of flexbox, so here's a new example . In the above steps replace display: box
with display: flex
and box-flex: 1
with flex: 1 1 0;
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.