tags:

views:

193

answers:

5

Using CSS Style Sheet

When i run my web page, Horizontal Scrollbar and Vertical Scroll bar is displaying, I want to display a web page in a browser without horizontal and vertical scroll bar. How to 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 Style sheet is displaying a page with vertical and Horizontal scroll bar. I don't want to display like that.

The page should fit in the browser.

Need Css Style Sheet Code Help

+2  A: 

To disable scrollbars, use the following

body {
overflow: hidden;
}

If you wanted to detect the browser window size, then you'd need javascript

adam
A: 

Here are some useful script to get the height and weight of the browser window: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

With the following code you can set a block element (div) to the width of the browser viewport.

...
<body>
    <div class="fullwidth">Test test</div>
</body>
...

And the CSS:

.fullwidth { width: 100% }
Frank
Isn’t the default width of `<div>`s 100%?
Paul D. Waite
A: 

You’ll get a vertical scrollbar on your web pages when the content is taller than the browser window. That’s normal. It happens on pretty much every website ever published. For an example, see Stack Overflow.

As for the horizontal scrollbar, that happens when the content is too wide for the browser window. By default, HTML content makes itself as wide as possible within the browser window, and no wider. You must be setting something to be wider than the browser window.

If you could post your HTML, we should be able to work out what it is.

Paul D. Waite
+1  A: 

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.

Nimbuz
A: 

first of all, i'd remove the body margin. and set whatever margin you want on a container div or something.

30equals