html - サイズの異なる別の div コンテナーが表示されたときに div コンテナーを下に移動する方法

Question

ページには、サイズの異なる 4 つの 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 のいずれか) の上に重なって表示される場合です。上に表示されている div1 または div2 または div3 に対して div4 を下にシフトしたい。

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';