css - 如何使 DIV 以 5 px 的边距占据整个窗口的高度和宽度

Question

您好，我正在尝试制作一个 DIV 以应用总窗口大小和 5px 边距，但我的代码中的边距属性存在一些问题..

.outer
{
  background-color:white;
  margin-left:-5px;
  margin-right:-5px;
  margin-top:-5px;
  margin-bottom:-5px;
  height:400px;
  width:100%
}

上面是我的CSS代码..请帮帮我..

此 DIV 需要占据屏幕/窗口大小的总高度和宽度，外边距为 5 像素。

Answer 1

首先，您可能需要将 css 元素 html 和 body 的高度和宽度设置为 100%。由于它们包裹了整个页面，如果不包裹，页面中的内容将无法包含整个屏幕。

其次，在处理百分比时使用 margin 并不是一个好主意。如果您放置一个与屏幕大小相等的 div 元素，然后然后给它一个 5px 的边距，则总宽度将为 100% + 5px。这将使它比屏幕本身更大。为什么不使用 padding 呢？ (参见 W3's page on the box model)因此我的建议是这样的:

html, body, .outer { height: 100%; margin: 0; width: 100%; }
.outer {
 padding: 5px;
}