Gendarme Gendarme - 7 months ago 9
Javascript Question

Scrollbars appearing for no apparent reason - responsive web design

My page contains three elements:


  • A
    <header>
    at the top that covers the whole width of the screen with
    width = screen.width;
    .

  • An
    <aside>
    below the
    <header>
    to the left of the screen.

  • A
    <main>
    to the right of and with the same hight as the
    <aside>
    .



All heights, widths, and margins are set with respect to
var w = screen.width/100;
and
var h = screen.height/100;
so that my page essentially looks the same in any display resolution. And they are set so that the width of
<aside>
and
<main>
, and the margin between them all add up to
screen.width
.

For example:

document.getElementsByTagName('main')[0].style.width = 85.5*w + "px";
document.getElementsByTagName('aside')[0].style.width = 14*w + "px";
document.getElementsByTagName('aside')[0].style.marginRight = 0.5*w + "px";


(85.5 + 14 + 0.5 = 100)

The problem:

The browser seems to think "What would happen if I display the scrollbars even though they are not needed?", and then notices that the scrollbars have a width > 0, which means that
<aside>
and
<main>
are taking more space than available (since they are set to take up 100% of the screen width, and now there is a scrollbar competing for the space). The browser therefore decides to reposition my
<main>
below my
<aside>
and ruin my design.

And now since
<main>
is under
<aside>
the elements no longer fit inside the screen and the scrollbars are actually needed and therefore stay, even though they are the cause of their own existence (as far as I understand).

However, if I zoom out (so that the elements take less space) and zoom back in, this gets fixed in Google Chrome. It doesn't in Firefox, though. And even if it did, this behavior is unacceptable.

The simple workaround to this problem is to have
overflow:hidden
on the
<body>
, but that is not an option for me.

Additional information:


  • I am not using any CSS-stylesheet: all my styling is done by JavaScript (for the simple reason that I want the sizes to depend on
    screen.width
    ).

  • The elements have
    display = "inline-block";
    . Using
    float
    produces horrendous behavior when the browser is anything but max size.



This behavior appears very weird to me and I do not understand what is causing it.

Answer

The solution is to give the <body> a fixed width. In this case, that would be the following:

document.getElementsByTagName("body")[0].style.width = screen.width;
Comments