100% 尺寸的 Div 边框不显示

发布于 2024-08-03 06:40:10 字数 309 浏览 1 评论 0原文

考虑这个简单的标记：

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

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

原文

Consider this simple markup:

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

In the browsers I've tested (Firefox and Chrome) the right and the bottom parts of the border seem to lie outside the window area, since they are not visible. How should I fix my markup or stylesheet so that the div's border is completely visible while the div occupies the whole available area (i.e. its sizes are 100%/100% or equivalent)?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简美 2024-08-10 06:40:10

由于边框位于元素宽度之外，因此如果主体宽度为 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;
}

Because the border rests outside of the width of an element, if your body width is 100%, the border will be outside of that and thus not visible. Take a look at the box model:

alt text http://www.codeweblog.com/upload/b/basic-knowledge-of-css.png

To set a border for your page, just don't define the width and height:

body
{
  border: 2px solid navy;
}

An alternative would be to do a faux border, setting the HTML background color to your border color, adding some padding, and then setting your body to the normal page background color:

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

Or if you are wanting to accomplish this using a 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;
}

回复收藏 0 原文

~没有更多了~