Search code examples
htmlcssiframescale

html: iframe scale to fit except for top line

I am trying to make a scale to fit iframe, except for a top line with a warning. For example:

<div style="text-align:center">Warning! blabla</div>
<iframe src="link" style="width:100%; height: 100%; transform-scale" frameborder = "0"></iframe>

<style>
    html, body, #wrapper{
        width:100%; height:100%; margin:0; padding:0; overflow:hidden;
    }
</style>

The problem is that if I do it like that the last line on the bottom of the iframe gets cut off, and scrolling isn't possible.

Solution

  • You can use calc() to calculate the height of the iframe. To do this, you have to set a height for your warning:

    <div style="text-align:center; height: 50px;">Warning! blabla</div>

    Then you can set the height of your iframe like this:

    <iframe src="link" style="width:100%; height: calc(100% - 50px); ... ></iframe>

    Read more about calc() here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc