I have a div element(using height:100%) that should have the same height as the whole html document. In webflow page builder, I’ve tried to set the body tag with the height of 100% and presto! it works well. The div element will continue to grow as more and more elements are added to the body element.
However, when i exported my code, the percentage doesn’t work anymore. It looks like the body element of 100% doesn’t return a value. Should i use javascript to set the body tag? In that case i’ll need to set the height of the tag everytime i add something dynamically to the body tag? Any easier way to deal with this?
Hi @thesecondmouse, good question. typically I try to avoid using JS on the body, but you may be able to set your body to 100% and your div to ‘auto’. I cant say for sure without more info though.
Can you please update your post with some more information? Things like your read-only link, screenshots, and your environment info really speed things up.
As you can see in the picture, the red border that is surrounding the center area is the div i’m talking about. Because i didn’t set my body element to a fixed size, it just doesn’t wrap all the child that is within it. There are still quite a number of child elements beneath the red border that belongs to the center div and the child element will just keep growing if i were to scroll down further. Hope this information is enough.
Hi @thesecondmouse, thanks for the update. It is very difficult to say what the design issue is, without being able to view the design in the Webflow editor.
At minimum, could you provide the read-only link to your site, the class name of the div that is having the issue and a description of how you want it to work That will help us to understand the issue and we can take a look
I’m afraid even if i were to share the read only link, i can’t simulate the same problem as what you see in the screenshot that i’ve provided because it works fine if i publish it directly from the page builder. The problem that you see in the screenshot are the exported codes.
Hi @thesecondmouse, thanks for the preview link, that is the only way we can look at the original design in Webflow From looking at the site, I have one suggestion: Change the div-container height to 100% instead of 0px and remove the 500px min-height setting.
I would check that next, then re-export and re-upload to your existing server (after making any edits outside of webflow that you are using). You might try to update your exported css and directly modify these settings.
I hope this helps, if not, let me know and I am happy to take a further look Cheers, Dave