1

考虑这个简单的标记：

<body>
 <div style="border: 2px solid navy; position:absolute; width:100%; height:100%">
 </div>
</body>

在我测试过的浏览器（Firefox 和 Chrome）中，边框的右侧和底部似乎位于窗口区域之外，因为它们不可见。我应该如何修复我的标记或样式表，以便 div 的边框在 div 占据整个可用区域时完全可见（即它的大小为 100%/100% 或同等大小）？

4

1 回答 1

3

因为边框位于元素宽度之外，如果您的主体宽度为 100%，则边框将在该宽度之外，因此不可见。看看盒子模型：

替代文字 http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png

要为页面设置边框，只需不要定义宽度和高度：

body
{
  border: 2px solid navy;
}

另一种方法是做一个人造边框，将 HTML 背景颜色设置为边框颜色，添加一些填充，然后将正文设置为正常页面背景颜色：

html
{
  background-color: navy;
  padding: 2px;
}
body
{
  background-color: #fff;
}

或者，如果您想使用以下方法完成此操作div：

<body>
  <div class="containerDiv">
    <div class="theDiv">
      Content here.
    </div>
  </div>
</body>

...

div.containerDiv
{
  background-color: navy;
  padding: 2px;
}
div.theDiv
{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
于 2009-08-30T06:08:51.420 回答