当另一个不同大小的div容器变得可见时，如何向下移动div容器

Question

页面上有四个不同大小的div容器。说 -

div1 - <div id="id1" class="foo">   ---has a table inside it with 10 rows
div2 - <div id="id2" class="foo">   ---has a table inside it with 6 rows
div3 - <div id="id3" class="foo">   ---has a table inside it with 2 rows

div4 - <div id="fui">    --- has a text area and a submit button

默认情况下，页面加载div1，div2，div3为hidden，CSS下方，div 4始终可见。现在基于某些条件，div1，div2，div3变得可见。

我遇到的问题是当div1,2,3中的任何一个变得可见时，div4不会相对向下移动但重叠并出现在可见div的顶部（div1,2,3中的任何一个）。我想将div4相对于任何上面出现的div1或div2或div3向下移动。

CSS -

.foo {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 100;
        left: 10;
        display: none;
    }


#fui {
        width: 100%;
        height: 100%%;
        position: relative;
        left: 100;
        top: 400;
    }

显示div，我在java脚本中使用以下代码 -

style.display = 'inline-block';