html - 删除以下代码中的垂直滚动

Question

我需要下面的 HTML 代码和 css 之类的东西。但现在浏览器显示垂直滚动。如何删除垂直滚动。代码在 jsFiddile http://jsfiddle.net/jHVc7/

<style type="text/css">
    html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        header{
            height: 50px;
            background: #84ff00;
        }
        section{
            background: #139e7f;
            height: 100%;
        }
        section div{
            width: 180px;
            float: left;
            background: #d0b107;
            height: 100%;
        }
        section aside{
            width: auto;
            overflow: hidden;
            background: #0edb09;
        }
        </style>
    </head>
    <body>
        <header></header>
        <section>
            <div>a</div>
            <aside>b</aside>
        </section>
    </body>

score 3 · Accepted Answer

将此添加到您的 html,body{ .... }

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow:hidden;
}

见演示http://jsfiddle.net/yeyene/jHVc7/1/

score 1 · Accepted Answer

您在标题中有 50px 的高度和 .section 的 100% 高度现在您的身体的总高度是 100% + 50px ，所以您正在获得垂直滚动。

您可以应用溢出：隐藏在正文中或调整 .section 的高度

 html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

使用下面的类。这应该有效。

section{
        background: #139e7f;
        height:calc(100% - 50px);
    }

score 0 · Accepted Answer

你可以加

overflow: hiddenhtml,body财产_

html,body{
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }

html - 删除以下代码中的垂直滚动

3 回答 3

Related

Reference