NO BUG: Problem with minimum div height at 100%

[Rarefield720]

Hello everyone,

I am encountering a problem with the height settings in Bricks Builder and was hoping someone could help me. I am trying to set a div to take up 100% of the height of the parent container. I have set the minimum div height to 100%, but for some reason, this does not result in the div expanding to occupy 100% of the parent container height.

I have confirmed that the body height is set correctly and that there are no issues with the viewport height. I have also verified that all parent containers have a defined height and there appear to be no inherited styles affecting the div. The immediate div container is also set to 100% height.

Attached is a screenshot of the current configuration of my Div in Bricks Builder. As you can see, the padding is set to a variable, but I don’t think this should affect the height of the div.

Has anyone had this problem or can offer any guidance on what might be going on or what else I should check? Any help would be greatly appreciated.

Thanks in advance!

[timmse]

Hi Carlos,
The crucial question is: does the parent div have a fixed height or a height in percent?

If the latter, this cannot work because it is not clear what the percentage height of the parent div should refer to. So the child div would take up at least 100% of 100%, but 100% of what?

However, if the parent div has a fixed value in px, rem, em, vh… etc., it will work with the child div and its 100% min-height.

[Rarefield720]

I understand. What I had was a section with 90VH and the child containers with 100% minimum height. I will try it and see how it goes.
Thank you very much.

[timmse]

Here is a small example that you can copy and paste to the canvas. Each div has a min-height of 100%, but the height of its wrapper (the container) is different:

{"content":[{"id":"cigepn","name":"section","parent":0,"children":["qepmyp","bbqhmp","oiqeri"],"settings":{"_cssCustom":".brxe-div {\n background-color: seagreen;\n min-height: 100%;\n padding: 1.6rem;\n color: white;\n}","_rowGap":"48"}},{"id":"qepmyp","name":"container","parent":"cigepn","children":["ecpjry"],"settings":{"_height":"100%"},"label":"Container 100%"},{"id":"ecpjry","name":"div","parent":"qepmyp","children":["mwznbw"],"settings":{}},{"id":"mwznbw","name":"text-basic","parent":"ecpjry","children":[],"settings":{"text":"div"}},{"id":"oiqeri","name":"container","parent":"cigepn","children":["nwmqnx"],"settings":{"_height":"50vh"},"label":"Container 50vh"},{"id":"nwmqnx","name":"div","parent":"oiqeri","children":["cogtjp"],"settings":{}},{"id":"cogtjp","name":"text-basic","parent":"nwmqnx","children":[],"settings":{"text":"div"}},{"id":"bbqhmp","name":"container","parent":"cigepn","children":["zqjcxi"],"settings":{"_height":"400"},"label":"Container 400px"},{"id":"zqjcxi","name":"div","parent":"bbqhmp","children":["nywsji"],"settings":{}},{"id":"nywsji","name":"text-basic","parent":"zqjcxi","children":[],"settings":{"text":"div"}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksrecent.local","version":"1.9.3","globalClasses":[],"globalElements":[]}