Amphtml: Is there any way to have Css height 100% in google amp?

[demil]

I need to have information of viewport height which i can only with inheriting html and body 100% height which is disallowed or via javascript which is also disallowed. We need to clarify that 100vh DONT WORK AS EXPECTED ON ALL DEVICES.

Is there any solution to have window height information in css or in javascript in google amp?

[demil]

I would only need to have this ( https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ )

   .my-element {
       height: 100vh; /* Fallback for browsers that do not support Custom Properties */
       height: calc(var(--vh, 1vh) * 100);
    }

and small javascript

     let vh = window.innerHeight * 0.01;
     // Then we set the value in the --vh custom property to the root of the document
     document.documentElement.style.setProperty('--vh', `${vh}px`);

and it works great, i know that is a hack but i really need 100% height ( or margin top ), so is there any other solution for this?

Thanks

[sparhami]

To clarify: the trick is to get 100% of the visible viewport (excluding the browser's URL bar or other UI) by updating a custom property on resize. This in fact used to be the behavior of vh on Chrome / Android, which changed over to match Safari's implementation (which uses the max viewport size). This is because switching the size of vh as the user scrolled away the URL bar turned out to be janky and a bad user experience.

This seems to be decidedly user hostile. What is a use case where this exact behavior is needed?

[demil]

There are multiple cases where i need it:

1) I have cover picture or video which is position fixed with 100% height and 100% width and then i have scrollable content below but which needs to be over this cover picture just for specific fixed height - for sticky header for example, and only way to do this in amp is to use vh which then breaks on mobile safari.

So lets put that with another words, i want sticky header to first appear on exact bottom as it is footer and then it will become header when you scroll.

Something like this:

and on every device this header should be on exact bottom on first enter to site

2) Second use case is full screen glider image, in order to do that i need container which is exact height 100%

There are actually many of other cases when you develop for mobile because not all websites tends to be scrollable with content, maybe i want to build fixed height and width micro page with horizontal scrolling instead and one of those horizontal layers will be scrollable vertical, and it doesn't violate amp rule that you need to have exact dimension of content because exact dimension of content can be 300px, 600px, but it can be 100% also, it is exact.

As we can inherit 100% from body that leave us only to vh and only hacky way is to have javascript repairing vh, but it is small chunk of javascript and i think it can be useful for many cases, maybe another way is to add another amp layout - cover, which will always be 100vh and 100vw but with fixed css vars.

[sparhami]

I think at most what we could do is add custom properties for 1% of the initial viewport height / width. These would not change on resize due to the browser UI scrolling / disappearing. We could update these on orientation change, though that could be awkward, since it could be either the viewport size with or without the the browser UI, depending on when you do the orientation change.

Since it would need to be set from JS, we would also need to be careful to not have it set after the page has been potentially displayed to the user. This can happen when the page is prerendered with server-side optimizations to statically layout things. I think it can also happen if the amp runtime loads after the visibility timeout defined in the amp boilerplate.

[demil]

Why couldnt we simple inherit 100% from body and html? What are you trying to prevent with ‘height:auto!important’ on body?

And another offtopic question is - how do you mean “server-side statically layout optimizations”?
Can you please point me to that?

[sparhami]

Why couldnt we simple inherit 100% from body and html? What are you trying to prevent with ‘height:auto!important’ on body?

This was changed in #2197. @dvoytenko might have context on this and if it is still relevant.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.