Streaming live at 10am (PST)

How to set body height with dynamic content?


#1

Hi,

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?

Regards,
Dexter


#2

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.

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile


#3

Hi,

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.

Regards,
Dexter


#4

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 smile That will help us to understand the issue and we can take a look smile

Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Cheers, Dave


#5

Hi Dave,

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.

But anyway, here is the link:
https://preview.webflow.com/preview/testing-ehwhyq?preview=ca1e8869133fec4c0cd87410bc444098

Perhaps you can give me any hints as to why the body element returns 0 even after i've set it to 100%?

Thanks.

Regards,
Dexter


#6

Hi @thesecondmouse, thanks for the preview link, that is the only way we can look at the original design in Webflow wink 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 smile Cheers, Dave


#7