Using an Element’s Height

CSS spec authors recognize that applying styles based on the height of an element is a useful ability, at least in the context of the <html> element. There is a height range feature for Media Queries that can be used to apply styles based on the height of the browser's viewport, but there is not currently any way to apply styles to individual elements in the page based on their own rendered height as they show up in the browser.

Thankfully JavaScript has knowledge of the height of every element in the document, so we can use JavaScript to help us resolve the selectors that should apply.

Parts Required

JS Tests

Min-height:

test <= element.offsetHeight

Max-height:

element.offsetHeight <= test

Plugins Capable

Syntax Examples

CSS (limited to <html> element)

@media (min-height: 500px) {
  body {
    background: lime;
  }
}
@media (max-height: 500px) {
  body {
    background: hotpink;
  }
}

EQCSS

@element .min-height and (min-height: 200px) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

@element .max-height and (max-height: 200px) {
  $this {
    background: greenyellow;
    border-color: limegreen;
  }
}

Selectory

.min-height[test="this.offsetHeight > 100"] {
  background: lime;
}

.max-height[test="this.offsetHeight < 100"] {
  background: lime;
}

Demos

Further Reading