CSSのborderが実際の領域より上に表示される
お世話になります。
CSSのborder-bottom指定のことでどうしても分からないことがあります。
div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。
本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。
実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。
ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？
いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。
よろしくお願いします。
CSS---
body {
background-image:url(../images/site-body.jpg);←この画像が2500pxあります。
background-position:top center;
background-repeat:no-repeat;
background-color:rgb(237,232,195);
margin:0px;
}
div#header {
width:800px;
height:150px;
margin-left:auto;
margin-right:auto;
}
div#contens {
border-bottom:1px dotted #333333;
width:800px;
height:auto !important;
min-height:800px;
margin-left:auto;
margin-right:auto;
}
div#footer {
background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。
background-repeat:no-repeat;
background-position:bottom;
height:100px;
}
HTML---
<body>
<div id="header">
～省略～
</div>
<div id="contens">
<div id="leftmenu">
～省略～
</div>
<div id="rightmenu">
～省略～
</div>
</div>
<div id="footer">
～省略～
</div>
</body>
