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>

Answer 1

在你的html，body {....}

中添加它

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

见DEMO http://jsfiddle.net/yeyene/jHVc7/1/

Answer 2

标题中的高度为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);
    }

Answer 3

您可以添加

overflow: hidden到html,body属性

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

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

3 个答案: