0

そこで、ラッパー 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>
4

1 に答える 1

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;
        }
于 2013-06-09T17:56:21.247 に答える