Question

I’m using CSS stylesheets. When I run my web page, a horizontal scroll bar and vertical scroll bar is displaying. I want to display the web page in a browser without horizontal and vertical scroll bars. How do I set a page width and height according to the browser page?

CSS code:

    body
    {
        margin: 0 auto;
        padding: 0;
        background-color: #000000;
    }

    #art-main
    {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
    }





    #art-page-background-simple-gradient
    {
        position: absolute;
        background-image: url('images/Page-BgSimpleGradient.jpg');
        background-repeat: repeat-x;
        top:0;
        width: 00%;
        height: 0px;
    }

    .cleared
    {
        float: none;
        clear: both;
        margin: 0;
        padding: 0;
        border: none;
        font-size:1px;
    }


    form
    {
        padding:0 !important;
        margin:0 !important;
    }

    table.position
    {
        position: relative;
        width: 100%;
        table-layout: fixed;
    }
    /* end Page */

    /* begin Box, Sheet */
    .art-Sheet
    {
        position:relative;
        z-index:0;
        margin:0 auto;
        width: 800px;
        min-width:px;
        min-height:px;
    }

    .art-Sheet-body
    {
        position: relative;
        z-index:1;
        padding: 12px;
    }

    .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
    {
        position:absolute;
        z-index:-1;
    }

    .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
    {
        width: 76px;
        height: 76px;
        background-image: url('images/Sheet-s.png');
    }

    .art-Sheet-tl
    {
        top:0;
        left:0;
        clip: rect(auto, 38px, 38px, auto);
    }

    .art-Sheet-tr
    {
        top: 0;
        right: 0;
        clip: rect(auto, auto, 38px, 38px);
    }

    .art-Sheet-bl
    {
        bottom: 0;
        left: 0;
        clip: rect(38px, 38px, auto, auto);
    }

    .art-Sheet-br
    {
        bottom: 0;
        right: 0;
        clip: rect(20px, auto, auto, 38px);
    }

    .art-Sheet-tc, .art-Sheet-bc
    {
        left: 38px;
        right: 38px;
        height: 76px;
        background-image: url('images/Sheet-h.png');
    }

    .art-Sheet-tc
    {
        top: 0;
        clip: rect(auto, auto, 38px, auto);
    }

    .art-Sheet-bc
    {
        bottom: 0;
        clip: rect(38px, auto, auto, auto);
    }

    .art-Sheet-cr, .art-Sheet-cl
    {
        top: 20px;
        bottom: 20px;
        width: 76px;
        background-image: url('images/Sheet-v.png');
    }

    .art-Sheet-cr
    {
        right:0;
        clip: rect(auto, auto, auto, 38px);
    }

    .art-Sheet-cl
    {
        left:0;
        clip: rect(auto, 38px, auto, auto);
    }

    .art-Sheet-cc
    {
        position:absolute;
        z-index:-1;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        background-color: #FFFFFF;
    }


    .art-Sheet
    {
        margin-top: -5px !important;
    }

    #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
    {
        min-width:800px;
    }

    /* end Box, Sheet */

The above stylesheet is displaying a page with vertical and horizontal scroll bars. I don’t want to display like that. The page should fit in the browser.

Answer 1

A useful tip:

overflow-x:hidden /* hides the horizontal scrollbar */
overflow-y:hidden /* hides the vertical scrollbar */
overflow:hidden /* hides ALL overflowing content, ofcourse disabling the scrollbars */

.. and this applies to ANY element/selector.