Issues with fully loading an external html file

Question

I am having some issues fully loading an html file into my div. After reading though different questions here I realized that I should use an iframe instead of trying to mess around with divs, ajax, or JS. This has served me well, however, upon loading it returns the page though in a scroll box as so:

how can I solve this issue?

Code snippets below:

This part comes from the index.html:

<div class="blurbs" id="blurbs">
        <iframe id = "frame" width="100%" height="100%" frameborder="0" ></iframe>
    </div>

the rest comes from the january html file which is a large one that just contains all that information so i am uncertain if y'all need to see it as I doubt it has anything to do with this.

this here is the javascript that is called when January is clicked:

function load_january() {

    var ajaxCall = document.getElementById("frame");
    ajaxCall.setAttribute("src", "../HTML/months/january.html");
}

Answer 1

I think you are interested in resizing the iframe height to match the height of the source HTML. This way you won't see the scrollbar.

This problem has been solved here: Adjust width height of iframe to fit with content in it

Answer 2

So i got around this by using a div instead, and calling an ajax function. Iframes are too much of a hassle with my knowledge level of CSS at this time.

 $(document).ready(function() {
        $("#jan").click(function () {
            $.ajax({
                url: "../HTML/months/january.html", success: function (result) {
                    $("#blurb").html(result);
                }
            });
        });
    });