Faced a problem with layout.

There are three blocks - title, main, bottom. The main block (the same as the middle one in the screenshot) owns a table of cell blocks, the positioning of which is specified through absolute.

How to make the middle block vary in size, depending on the number of rows in the table and the bottom block goes accordingly for it?

Initially, I focused on the positioning of individual blocks, like table cells and I would not want to change it. Of course, I could have done everything through absolute pozionization, but the table itself in the future will probably go down, therefore, it will be necessary to re-create it. Therefore, I ask for advice on how to change the height of the middle block.

Screenshot with the problem:

enter image description here

Code:

.table__title { font: bold 30pt 'Open Sans'; background: #18C0DF; } .table__main-block { background: #5DEA72; } .table__bottom-block { background: #8cafed; } .elements { position: relative; } .element { position: absolute; border: 1px solid black; width: 64px; height: 42px; } 
 <div class="table"> <div class="table__title"> TITLE TITLE TITLE </div> <div class="table__main-block"> MAIN-BLOCK MAIN-BLOCK MAIN-BLOCK <div class="elements"> {% for element in elements_main %} <div class="element element_group-{{ i }} element_period-{{ j }}"> </div> {% endfor %} </div> </div> <div class="table__bottom-block"> BOTTOM-BLOCK BOTTOM-BLOCK BOTTOM-BLOCK </div>

    1 answer 1

    Using CSS, it is impossible to automatically set the height of the parent block, the children whose elements are absolutely positioned . This problem can be solved only using Javascript.

    You can find the minimum offsetTop value and the maximum offsetTop+height value among the child blocks. Their difference will give the height of the parent block, which should be set by events: when loading, resize , etc.

    • Thanks for the clarification, already reworked the layout. your way to remember for the future - while1pass