Question

我正在使用CSS样式表。当我运行我的网页时，会显示水平滚动条和垂直滚动条。我想在没有水平和垂直滚动条的浏览器中显示网页。如何根据浏览器页面设置页面宽度和高度？

CSS代码：

    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 */

上面的样式表显示了一个包含垂直和水平滚动条的页面。我不想那样显示。该页面应该适合浏览器。

Answer 1

要禁用滚动条，请使用以下

body {
overflow: hidden;
}

如果您想检测浏览器窗口大小，那么您需要javascript

Answer 2

当内容高于浏览器窗口时，您会在网页上获得垂直滚动条。这很正常。它发生在几乎每个发布过的网站上。有关示例，请参阅Stack Overflow。

对于水平滚动条，当内容对于浏览器窗口来说太宽时会发生这种情况。默认情况下，HTML内容在浏览器窗口中尽可能宽，并且不会更宽。您必须将某些内容设置为比浏览器窗口更宽。

如果您可以发布HTML，我们应该能够弄清楚它是什么。

Answer 3

一个有用的提示：

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

..这适用于任何元素/选择器。

Answer 4

首先，我要删除身体边缘。并在容器div上设置你想要的任何余量。

Answer 5

以下是一些有用的脚本来获取浏览器窗口的高度和重量：http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

使用以下代码，您可以将块元素（div）设置为浏览器视口的宽度。

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

CSS：

.fullwidth { width: 100% }

如何在没有水平和垂直滚动条的情况下在浏览器中显示我的HTML页面？

5 个答案: