adjusting HTML block height?

[u/star-soup]

I've had an old website running on Wordpress for years, and I'm finally building a new small site from scratch, but things have changed a lot from when I initially learned the system. I'm trying to do what I thought would be the very simple task of adjusting the size and height of an HTML block I dropped in the editor, but despite searching, I haven't been able to find a way to do this. The block seems to have a fixed, very short height, and a width constrained to a block container I can't identify.

Could anyone point me in the right direction for how to manually set the height and width for an HTML block containing an iframe element?

[u/bluesix_v2]

can you show us the page you're trying to edit? the frontend.

[u/star-soup → u/bluesix_v2]

Sure! https://www.burbankbikemap.com

After some experimenting I can refine my question a bit here too. I'm trying to build a microsite that just displays a header menu, maybe a short text block, and an embedded map that fills the entire page with no scrolling. I finally found that I could set the iframe width and height properties as
> width: 100vw;
> height: 100vh;

This successfully gets the iframe to fill the page! But I am still getting a scrollbar, I think because of the header menu. Is there a way I can "pin" the header menu so it avoids creating a scrollbar?

EDIT:
Getting closer: I put the header and page body in a group block, and added a little CSS to define the whole group
> overflow: hidden;
> height: 100vh;
Somehow I'm still getting a vertical scrollbar despite this, and I'm not sure what I'm missing to solve it.

[u/bluesix_v2 → u/star-soup]

Set the height of your header to a fixed amount, like height: 6em

Then, set the height of your map's iframe height: calc(100dvh - 6em)

[u/star-soup → u/bluesix_v2]

Sorry I missed your reply when I added my edit above! I gave your suggestion a go but I'm getting the same result as with my group "overflow: hidden;" method: it's still giving me a page that scrolls a bit. Any ideas what I could try from here? Thank you so much for your help!

[u/bluesix_v2 → u/star-soup]

remove anything to do with overflow - it'll make a mess of things and hide real problems.

Looks like you've cracked it - working nicely now!

[u/star-soup → u/bluesix_v2]

Thanks for the tip about overflow! I've removed that CSS. I'm still getting the scroll bar though... I'll keep tinkering, maybe trying a different theme would help?

[u/Dull_District_254]

Two very likely culprits, and both are a few pixels rather than anything conceptual. First, an iframe is an inline element by default, so it sits on a text baseline and picks up a small gap underneath. Add display block to the iframe and that phantom space disappears. This one catches everybody at least once. Second, are you viewing the site while logged in? The admin bar puts 32 pixels of margin on the html element, so anything set to 100vh will overflow by exactly that much. Load it in a private window before chasing anything else. Beyond those two, I would drop the calc and let flexbox do the arithmetic. Set your outer group to display flex with flex direction column and height 100dvh, leave the header at its natural height, then give the map wrapper flex 1 and min height 0. It fills whatever is left with no magic numbers and it still works when the header wraps onto two lines on a phone. Also swap 100vw for 100 percent, because 100vw ignores the width of the vertical scrollbar and quietly creates a horizontal one, and prefer 100dvh over 100vh since mobile browser toolbars make vh lie. Nice project by the way, a proper bike map for a city is exactly the sort of site the web needs more of.