Question

好吧这看起来很基本，但我似乎无法找到答案，也许我的搜索条件过于笼统？

我已经定义了一个顶级div，它有一个圆圈，我想这是视口的最大尺寸。

这是最基本形式的代码

<body>
    <div id="main">
            test
    </div>
</body>

CSS：

#main {
    position:absolute;    
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    border: 1px green solid;
}

请参阅此JSFiddle：

Div应该有一个1px绿色边框，这是可见的，但它似乎总是在显示屏底部和右边需要一个滚动条。

答案 0 :(得分：5)

答案 1 :(得分：0)

Answer 1

使用box-sizing: border-box

div的宽度和高度是100％+ 2px（2个边框，每个像素一个），这需要滚动条。 box-sizing: border-box解决了这个问题，因为它告诉浏览器在宽度和高度中包含填充和边框。

我几乎总是使用：

* {
  box-sizing: border-box;
}

Answer 2

身体上有默认的边距。添加此项将其重置为0：

html, body {
  margin: 0;
}

加：将box-sizing: border-box;添加到#main DIV。