100% 高度 div 没有在视图区域之外获得边框答案

【问题标题】：100% height div not getting border outside view area100% 高度 div 没有在视图区域之外获得边框
【发布时间】：2013-06-05 10:08:49
【问题描述】：

所以我做了一个网站，里面有一个包装器 div。然后内容居中并获得 100% 的高度，以确保填充浏览器的视图区域。奇怪的是主 div 有一个边框。如果我让我的浏览器变小并使用滚动器在页面上下来。然后边框仅显示在视图区域中的 div 部分。当我向下滚动时，没有在 div 的其余部分设置边框。其他人有这个问题吗？我似乎无法在 google 中找到有关此特定问题的任何信息。

这是我的基本布局

<html>
<head>
  <style>
html, body {
 background: url('../img/subtle-circles-pattern-2268.png') left top repeat;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: Tahoma, Geneva, sans-serif;
 font-size: 13px;
 color: #666;
}

#wrapper {
    z-index:1;
    width: 100%;
    height: 100%;
    min-height:100%;
    text-align: center;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#content {
    margin: 0px auto;
    width: 940px;
    height: 100%;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    background-color: #FFF;
    text-align: left;
}
</style>  
</head>
    <body>
         <div id="wrapper">
              <div id="content">
                   alot of content<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
              </din>
        </div>
   </body>
</html>

【问题讨论】：

标签： css browser scroll height border

【解决方案1】：

您必须从内容 ID 中删除 Height 属性，ID 的高度将根据您页面上的内容量计算，因此您的 css 应该是这样的

#content {
            background-color: #FFFFFF;
            border-left: 1px solid #C3C3C3;
            border-right: 1px solid #C3C3C3;
            margin: 0 auto;
            text-align: left;
            width: 940px;
        }

【讨论】：

感谢@Zan，这是问题
嗯，也许我太快了...从内容 ID 中删除高度会消除这样的效果，即使我没有足够的内容，div 也是浏览器的 100% 的高度。