调整HTML容器元素的大小不能正确调整子元素的大小

Question

I have a simple AngularJS, JS, JQ, HTML5, CSS3 web app. I am facing the following problem: when I try to resize the part of web interface - child elements get smaller, but they cross the border line. All content is grabbed into a <div id="resizable"> which is just jquery-ui resizable element:

<script> $(function() { $( "#resizable" ).resizable(); }); </script>

It looks like this:

1:

And what I want is that it \\'d be like this:

2:

No content should be below the border line. What CSS rules have to be applied for child elements so they change their size according to their container element? I tried already all of available positioning, but it just don't work - elements behave identicaly.

Can anyone provide a working plunker, which would be capable of resizing child elements correctly? Every useful answer is highly appreciated and evaluated.

Thank you.

Answer 1

Have you tried setting all your heights and widths in % ? I threw together an example in a JSFiddle, of a 3x3 grid. They are all set to a 1/3 width and height, and so resize automatically when a user resizes the outer wrap.

Example Fiddle

HTML

<div class="resizable">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...Two more rows...
</div>

CSS

.row {
    height:33%;
    width:100%;
}
.cell {
    width:33%;
    height:100%;
    float:left;
}

JS

$('.resizable').resizable();

Obviously this is an example to demonstrate the concept and not code that will work directly for your site. If you could post some of your code, I can try to adapt it.