htmlcss

CSS Media Detect Overflow

I'd like to detect whether the web page is flowing over the Y axis, aka it is higher than the display and if so, affect styles.

I am looking for a purely CSS solution, or as close to that as possible.

How would I do this?

Solution

  • I am looking for a purely CSS solution [...] such as a @media query

    In standards-based (real-world) web development, @element queries (as opposed to @media queries) are still hypothetical.

    If they weren't, your CSS-only solution could be something like:

    @element body and (min-height: 101vh) {

[... STYLES HERE...]

}

    In the meantime, read:

    Element Queries for CSS by Tommy Hodgins (September 30, 2015)

    and have a look at

    eqCSS on Github

    Further Reading: