Search code examples
javascripthtmlcssdimensions

Write text to the bottom of the page depending on window size

Is it possible to have text fill the page depending on the window dimensions?

For example, I would like to have something like the following: Example of text filling a div to the left of the screen The text of the left of the screen fills the div that is it in. If I were to re-size the window the number of lines of "ExampleText" should change.

Unfortunately I don't have any code to show since I have no idea how to start this. I imagine that I'll have to use JS for some of it, but I'm not sure how to get JS to gather the dimensions of the window.

Many thanks.

Solution

  • You can get the height of the window in javascript with:

    var h = window.innerHeight;

    If you know the line-height of "ExampleText" (you may have already set it in the CSS or you can try getting it with document.getElementById('div_name').style.lineHeight), then divide the the window height by the line-height. That should give you the number of lines that'll fit in the window.

    Alternatively, in CSS, you can set a div to height: 100% (assuming all parent elements have a 100% height) and then set an inner div to position:absolute;bottom:0; so the text starts counting from the bottom to the top. You'll have to deal with choosing to show scrollbars or not, since the text will inevitably be larger than the containing div.