[FIXED] Scrollbarwidth prevents document from 100% width

Issue

I’m trying to have this view or two columns, one is taking the third of the page and the other is taking 1/3 (the rest of the page). All works fine.

$(window).resize(function(){
        var height = $(window).height();
        var width = $(document).width();
        var right = (width/3);
        var about = width - right;

        $('#about').height(height);
        $('#events').height(height - (height/2));
        $('#vision').height(height/2);
        $('.inner-menu').height($('#right').height());

        $('#about, #contact').width(about);
        $('#right').width(right);
        $('.inner-menu').width(width/3);

When I first load the page, automatically the scrollbar shows up then disappears, and this causes a margin of 17px, I have to resize the browser to have it back to normal…

Is there anyway to prevent this? Since the height always adapts to the window’s height.

Solution

I have found a solution. I used

html {
    overflow: hidden;
}

then use jquery to show it on other screens

if (width <= 1024){
    $('html').css({
        "overflow": "visible"
    })
};

Answered By – Bououm

Answer Checked By – Mary Flores (FixeMe Volunteer)