Question

考虑这个简单的标记：

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

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

Answer 1

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

alt text 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;
}

不显示具有100％尺寸的Div边框

1 个答案: