Question

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

这是我的基本布局

<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>

Answer 1

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

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

100％高度div没有到视图区域外的边界

1 个答案: