css - html,body设置height：100%为什么会出现纵向滚动条

问题描述

问 题

今天很偶然的碰到的一个问题，简化来说，当设置了html,body{height:100%,weight:100%},然后给一个盒子设置margin-top:20% 之后，按道理来说应该是盒子距离浏览器上边界20%的浏览器宽度的距离吧（父元素是body），但是设置之后，我发现盒子的位置并没有跟我想的一样，而是撑高了浏览器的高度，在右侧出现了滚动条。当去掉html,body{height:100%,weight:100%}之后就不会出现滚动条了

我的疑惑就是明明 浏览器本身的高度是足够的，并没有不够容纳20%body高度，为什么浏览器的高度会被撑高？下面上图说明

<style>
    .green {
        background-color: #009926;
        width: 500px;
        margin-top: 20%;

    }
body,html{
    height: 100%;
    width: 100%;
}
</style>

解决方案

两个问题
1.浏览器自带的body的margin值不为0；
2.垂直外边距合并。

这篇关于css - html,body设置height：100%为什么会出现纵向滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！