CSS Media Detect Overflow

Question

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?

Possible duplicate of [Determine if an HTML element's content overflows](http://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows) — fnune, Jan 28 '16 at 17:25
@FaustoNA, I was looking for a purely CSS solution, such as a media query though. As far as I know, this hasn't been asked before. — Lucien, Jan 28 '16 at 17:32

Rounin · Accepted Answer · 2016-01-28T21:30:34.153

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:

Thoughts on Media Queries for Elements by Jonathan T Neal (Feb 7, 2013)
Media Queries are a Hack by Ian Storm Taylor (Apr 1, 2013)
Media Queries Are Not The Answer: Element Query Polyfill by Tyson Matanich (June 25, 2013)
Beyond Media Queries — It’s Time to Get Elemental by Richa Jain (March 26, 2015)
Container Queries: Once More Unto the Breach by Mat Marquis (June 30, 2015)

Thank you! That's exactly what I was looking for. – Lucien Jan 28 '16 at 21:29 — Lucien, Jan 28 '16 at 21:29

score 0 · Answer 2 · answered Jun 20 '23 at 20:17

Years have passed since this was asked and answered. We now have CSS container queries, which would be the equivalent of the 'element queries' mentioned in the original answer.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

There are some great YouTube videos on this!

CSS Media Detect Overflow

2 Answers2