javascript - Using em and rem font-size with twitter bootstrap

Question

I'm making a site that uses mainly rem units as font-size units, and also for other attributes (width, height, margins etc.) One of the functions in the site is that the #mainContent's size changes and this is done by changing the font-size in the html tag:

css:

html, body {
    font-size: 100%;
}

javascript:

$("#mainContent").mousewheel(function(event, delta, deltaX, deltaY) {
    var fontSize = parseInt(($("html").css("font-size")).match(/\d+/));
    if (deltaY > 0) { // if scroll up:
    $("html").css("font-size", ((fontSize * 1.2) / 16) * 100 + "%");
    }
    else if (deltaY < 0) { // if scroll down:
    $("html").css("font-size", ((fontSize * 0.8) / 16) * 100 + "%");
    }
});

The problem is that when the #mainContent is re-sized, bootstrap's navbar size (not font-size) and modal font-size change even though I specify their sizes so they won't be affected:

.container-full {
    font-size: 100%;
}

How can I make sure only the #mainContent is affected and not all the other elements? Thanks