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

【问题标题】：How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?如何让我的 HTML 页面在没有水平和垂直滚动条的情况下显示在浏览器中？
【发布时间】：2012-03-29 18:11:29
【问题描述】：

我正在使用 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 */

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

【问题讨论】：

你能提供一些 HTML 吗（只是一个大纲就可以了）。你运行的屏幕尺寸是多少？您的目标最小屏幕尺寸是多少？你的图片有多大（看起来像 800 像素宽，但有多高？）
是的，我们需要看一些 HTML。

标签： css

【解决方案1】：

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

body {
overflow: hidden;
}

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

【讨论】：

【解决方案2】：

一个有用的提示：

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

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

【讨论】：

【解决方案3】：

当内容高于浏览器窗口时，您的网页上会出现一个垂直滚动条。这很正常。它发生在几乎所有发布过的网站上。示例见Stack Overflow。

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

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

【讨论】：

【解决方案4】：

首先，我会删除正文边距。并在容器 div 或其他东西上设置你想要的任何边距。

【讨论】：

【解决方案5】：

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

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

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

还有 CSS：

.fullwidth { width: 100% }

【讨论】：

<div>s的默认宽度不是100%吗？