scrollbars in chrome

Question

why does the following page give me scrollbars in chrome but works fine in every other browser?

i am pasting everything, just in case. though i think it is unrelated to the java applet since i get the same problem with a flash movie.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Java</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript">

function getParameter(name, url)
{
    if(!url)
    {
        url = window.location.href;
    }
    var paramsStart = url.indexOf("?");

    if(paramsStart !== -1)
    {
        var paramString = url.substr(paramsStart + 1);
        var tokenStart = paramString.indexOf(name);

        if(tokenStart !== -1)
        {
            var paramToEnd = paramString.substr(tokenStart + name.length + 1);
            var delimiterPos = paramToEnd.indexOf("&");

            if(delimiterPos === -1)
            {
                return paramToEnd;
            }
            else
            {
                return paramToEnd.substr(0, delimiterPos);
            }
        }
    }
    return -1;
}

      $(document).ready( function()
      {
        var w = getParameter('width');
        var h = getParameter('height');
        var d = document.getElementById('javadiv'); 
        d.style.width = (w > 0) ? w+"px" : "100%";
        d.style.height = (h > 0) ? h+"px" : "100%";

        var main = getParameter("game");
        var mainclass = getParameter("mainclass");
        var gmain = main.substring(0,1).toUpperCase() + main.substring(1,main.length);

        var code = mainclass;


        var applet = '<applet id="applet" codebase="'+getParameter("base")+'" archive="applet.jar" code="'+code+'" width="100%" height="100%">';
        applet += "<param name='debug' value='"+getParameter("debug")+"' ></param>";
        applet += '</applet>';

        $(applet).appendTo("#javadiv");
      });
    </script>
    <style>
    html,body
    {
      width:100%; 
      height:100%;
      background-color:#000;
      margin:0;
      padding:0;
    }
    </style>
  </head>

  <body><div id="javadiv" style="width:100%;height:100%;"></div></body>
</html>

I am having trouble recreating the issue. Could you please post a link to a working example? — tw16, Jul 12 '11 at 14:36

score 0 · Answer 1 · answered Jul 12 '11 at 13:48

0

I wonder if Chrome is adding some margin or padding to your javadiv, the one you are setting to 100% height & width.

Try resetting the margin and padding on that div.

answered Jul 12 '11 at 13:48

Jason Gennaro

34,535
8
65
86

what if you set the `javadiv` to something less than `100%`? – Jason Gennaro Jul 12 '11 at 13:55

score 0 · Answer 2 · answered Jul 12 '11 at 13:48

You could use overflow-x: hidden; or overflow-y: hidden; depending on which scroll bars appear. Setting that to the html and \ or to the body should hide any scroll bars from emerging.

Most likely culprit to your problem could be browser-specific style sheets. I see you have a 100% high and wide element, and if any element surrounding it has padding or margin, you get scroll bars.

scrollbars in chrome

2 Answers2

Linked