0

I need to have a div (divParent) which needs to have 2 other divs (divContainer, divButtons) where the divButton will display at the very bottom of the DivParent and the divContainer will use the entire remaining space of the divParent up to the divButton, but it cannot overlap the divButtons and if the content of the divContainer is too big, I need the vertical scrollbar to be displayed.

I've got the following more or less working but the divContainer seems to be overlapping the divButtons and it does not display the vertical scrollbar if the content is too big, even when I specify overflow: auto or overflow-y: auto.

<div id="divParent" style="width: 100%; height: 100%; background-color: red; position: relative">
    <div id="divContainer" style="overflow-y:auto;">
        <table id="fields">
           <large content goes here>
        </table>
    </div>
    <div id="divButtons" style="width: 100%; background-color: blue; position: absolute; bottom: 0">
        <div style="float:right;">
            <table>
                <tr>
                    <td style="padding: 2px">
                        <div id="submitbutton">test1</div>
                    </td>
                    <td style="padding: 2px">
                        <div id="cancelbutton">test2</div>
                    </td>
                </tr>
            </table>                                       
        </div>
    </div>
</div>

If I specify "max-height:100px" on the divContainer to test, it does exactly what I need where the vertical scrollbar is displayed but it's clearly no longer stretched all the way to the divButton.

Note that the divParent is then used in a third-party popup window.

Any suggestions?

Thanks.

Thierry
  • 6,142
  • 13
  • 66
  • 117

2 Answers2

1

I eventually figured it out, but credit to @Brad for his answer in:

from How do I make a div stretch in a flexbox of dynamic height?

I had to rejig a few things but eventually got there and my divs are defined as follows now:

<div id='divParent' style='display: flex; 
 flex-direction: column; height: 100%; width: 100%;'>

<div id='divContainer' style='width: 100%; flex-grow:1; 
 overflow: auto'>

<div id='divButtons' style='width: 100%; height: 40px; 
 margin-top: 5px'>

That'it!

Thierry
  • 6,142
  • 13
  • 66
  • 117
0

Install bootstrap and you will have great control of div placements. Bootstrap creates 12 columns for each row: <div class="row"> <div class="col-md-7" align="right"> <div class="row"> </div> <div class="row"> </div> </div> <div class="col-md-3" align="left"> </div> <div class="col-md-2" style="padding-right:2%;"> </div> </div>