How to Make My Web Page Display in Full in Any Browser Window of Any Size

How to make my web page display in full in any browser window of any size

Why are you setting margin-left twice? Why are you floating (and displaying inline) a div that you want to take up the whole screen? Setting a negative left margin will move your whole div to the left, and therefore cause it to not reach all the way to the right even when the width: 100%.

Take away all margins. Do width:100%. change display:inline to display:block. Take away the float. If you have to set this to position:absolute, then be sure to specify: top: 0px; left: 0px

How to make a div with full screen when only the browser is maximized

You are [probably] over complicating your issue. What you have is a background (or a div container) of a certain width but you don't want that to exceed that width, so, use CSS3 width rules:

.div_background-image-container {
    width:100%; /* of whatever the screen size*/
    min-width:320px; /* For mobile devices or a size that you need */
    max-width:800px; /* The maximum size of this image */ 
    margin:auto; /* Centre the div*/
    display:block;
}

within this div you can also set the background image and set it using the CSS3 background-size attribte of contain where the image will cover the background space. You could also use cover depending on which looks best for your situation. See http://www.w3schools.com/cssref/css3_pr_background-size.asp .

.div_background-image-container {
    background: url(fingers_in_the_air.jpg);
    background-size: contain; /* OR cover, please explore */
    background-repeat: no-repeat;
}

From this the background container box will have a minimum width of 320px and a maximum width of 800px, and within these parameters a width of 100% of the screen, so it doesn't matter the size of the browser window or the browser resolution, these constraints will hold the image and it will display proportionally according to the background-size CSS statement.

This also avoids Javascript and other event processing as the width is defined automatically by the browser.

make an element full screen in the web page

HTML elements can't break out of the bounds of the browser document window. The menu and tool bar are outside of the document window (which is a child of the browser window), so you can't "reach" them.

I think the only solution is to trigger full screen mode with JavaScript.

This answer shows how you can do that: How to make the window full screen with Javascript (stretching all over the screen)

Set size of HTML page and browser window

This should work.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                background-color: pink;
            }
            h1 {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Hello World</h1>
        </div>
    </body>
</html>

The background colors are there so you can see how this works. Copy this code to a file and open it in your browser. Try playing around with the CSS a bit and see what happens.

The width: inherit; height: inherit; pulls the width and height from the parent element. This should be the default and is not truly necessary.

Try removing the h1 { ... } CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1 element is influencing the layout of its container. You could prevent this by declaring overflow: hidden; on the container or the body.

I'd also suggest you do some reading on the CSS Box Model.

How to maintain the size of webpage to be same in every browser/full screen?

Sometimes it helps to put the height of html and body at 100%. As well as padding: 0 and margin: 0 should be in the html and body styles to ensure that there are no unwanted borders.

.mainwrapper {
    background: url(bg.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: KaiTi, "Arial Unicode MS";
    font-size: 100%;
    color: #000;
}

html {
    height: 100%;
    padding: 0;
    margin: 0;
}

I think you don't understand the concept of the div. If you would want a fullscreen background then you should apply the background image to the body style like this:

body {
    background: url(bg.png) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
     }

You should use an div as big as the screen to fill it with a background image. Thats why you have the body. And then the image will move while scrolling and you have no white borders at all.

If you however still want to use the div which is used for parts of the website not as an substitute for body then you have to deal with the fact that it won't move while scrolling (except you have a script for it).

Proportionally scale website to fit browser window

Depending on the browsers you need to support (IE9+), you could achieve that with simple CSS transform.

See an example (using jQuery) in this jsfiddle

var $win = $(window);
var $lay = $('#layout');
var baseSize = {
    w: 720,
    h: 500    
}

function updateScale() {
    
    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;
    
    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;        
    }
    
    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');
    
    console.log(newScale);
}

$(window).resize(updateScale);

If you need backwards compatibility, you could size everything in your site with % or em, and use a similar javascript to control the scale. I think that would be very laborious though.

How to make the window full screen with Javascript (stretching all over the screen)

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script>

How to Make My Web Page Display in Full in Any Browser Window of Any Size