Change G+ Comments Widget Height

Height of G+ Comments Widget is set to 603px. It will occupy 603px even there is no or only 1, 2 comments: See the picture at right. This is a waste of page space.

As I place one ads below the post body, I would rather reader to view the ads rather view the empty space G+ Comments occupies.

Because G+ Comments Widget set the height property directly in the gpluscommentsdiv and iframe tag: the html code looks like below:
<div id="gpluscomments" class="cmt_iframe_holder" style="display: inline-block; width: 957px; height: 603px;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 956px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 603px;"></iframe></div>

So I have to use javascript to change the height: to make it smaller.
The JavaScript code looks like below - css will not work here.

<script>
//<![CDATA[ 
function myOnLoad() {
 var gpluscomments = document.getElementById("gpluscomments");
 gpluscomments.style.height="400px";

 var gpluscommentsIFrame=document.querySelector('#gpluscomments iframe'); 
 gpluscommentsIFrame.style.height="400px"; 
}
window.onload = myOnLoad;
//]]>
</script> 
 

Go to dashboard -> "Template", Click "Edit Html", add the javascript code above before </html>
The code will be executed after page(DOM) is loaded, and change the height of gpluscomments and theinner iframe height to 400px.

Now the the widget is shorter, and when user clicks the comment text box, it will expand and show all comment.