JS-Iframe高度调整

Question

I have this

 <script>
     var calcHeight = function() {
       $('#iframe').height($(window).height());
     };
     $(document).ready(function() {
       calcHeight();
     });

     $(window).resize(function() {
       calcHeight();
     }).load(function() {
       calcHeight() ;
     }); </script>

The above JS just resizes the height. How to I edit the above JS and add to the calculated height 10px?

For example if the JS calculates 700px, I need to have the height as 710px.

Answer 1

You can use css calc() along with vh unit to do the calculations for you

iframe {
    height:calc(100vh + 10px);    
}

JSFiddle demo

calc() compatibility

Viewport units compatibility

If you wish to continue using JS just add 10 to the returned height

$('#iframe').height($(window).height() + 10);

Answer 2

Maybe something like this

<script>
 var calcHeight = function() {
   $('#iframe').height(10 + +$(window).height());
 };
 $(document).ready(function() {
   calcHeight();
 });

 $(window).resize(function() {
   calcHeight();
 }).load(function() {
   calcHeight() ;
 }); </script>