Editor showing relative height wrong

Steps: 1. Created 3 blocks in following order: Navigation, Structure (2 rows: 1 + 3 columns) & Footer. 2. Set the Structure block height / min-height to 100% 3. Set the Footer block top-margin to negative pixels of its height (e.g. -210px).

Expected result: - The blocks are in order, the footer in the bottom part of the page.

Actual result: - The Structure and the Footer are shown on top of eachother in the editor. See Image 1. - However, the preview shows the page correctly in browser, tried Chrome, Edge and Firefox. See Image 2.

This makes the Bootsrap Studio pretty much unusable for me.

Image 1 - The Bootsrap Studio Editor

Image 2 - Preview of same page in browser

According to how you described laying it out and setting those styles, I can't reproduce your issue. I noticed you have made other edits that I did not such as change things in the nav and footer. I'm wondering if you changed something else along the way that actually causes this issue for you.

I suggest doing a new project and then doing exactly what you described without any other edits to see what happens then.


Yep same issue for me, I have set html, body {height: 100%;} then .container { height:100% } but .container doesn't show correctly in the editor.