[HELP!] How can I keep all of a page's content within the viewport?

[eli_oat]

Hey there, I’ve run into a CSS wall, and wondering if anyone can help out?

I’m currently writing CSS to display a status board on televisions. The initial version of the display would automatically scroll up and down if there was any overflow, but the client says this doesn’t work, and wants to fit all of the info on the screen no matter what.

The hiccup is that I need to support an arbitrary amount of data on the screen…and don’t really know anything about the screen (this’ll be used at a bunch of places, so we can’t predict every users specific setup).

SO, does anyone know of a way to constrain a page’s content to just the visible viewport? I’ve been trying to make it work with grids, columns, flex box, transforms, viewport units and even zoom.

Thanks!

[Atelierbram]

Tough one, bordering on impossible. So setting the outer container height on height: 100vh and then grids and media-queries and small font-sizes on smaller screens and/or with large amount of content can solve it, but might render it unreadable on some smaller devices and/or with large amounts of data.

So maybe the solution would be to limit the amount of data being shown, and/or truncate text with something like text-overflow: ellipsis in combination with the 100vh viewport unit on the body-element or page-container.

[bearhead]

If you can use javascript, you could find the ratio of the content height to the window height and scale the content by that ratio to fit everything on the screen:
http://codepen.io/kvana/pen/XMyGRo

[Author]

Posts