html - 顶部图像，重复背景和底部图像...HTML 和 CSS

Question

我在这里遇到了一些问题...我有一个 Div，它叫做 leftSideBar，里面有两个图像，一个顶部和一个底部，这个 div 有一个 repeat-y 背景。它确实有一个最小高度，但我使用 jquery 来获取我的内容 div 的高度，就像这样......

$(document).ready(function() {
var div_height = $("#content").height();
$(".leftSideBar").css("height", div_height);

var div_height = $("#content").height();
$(".rightSideBar").css("height", div_height);
});

我想要做的是将顶部图像放在 div 的顶部，将底部图像放在 div 的底部...这是 HTML...

<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--leftSideBar-->

<div class="content" id="content"></div><!--content-->

<div class="rightSideBar">
<img src="images/rightSideTop.jpg" width="174" height="70" border="0" />
<img src="images/leftSideBottom.jpg" width="174" height="98" border="0" />
</div><!--rightSideBar-->

和 CSS

.leftSideBar{
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
}

.rightSideBar{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
    margin-top: -49px;
    width:174px;
}

.content{
    background:#FFF;
    width: 992px;
    position:relative;
    min-height: 591px;
    float:left;
    margin: -48px auto 0;
    font-size:13px;
}

任何帮助或指向正确方向的观点都会很棒!谢谢!

Answer 1

因为看起来您使用的是静态宽度，所以您应该能够让您的 IMG 元素成为 block 状和 position: absolute 并将它们对齐到顶部/底部。

.img-side{
    display:block;
    position:absolute;
    left:0;
    top:0; /* we'll use top as a default*/
}
.img-side.bottom{
    top:auto; /* might need this, I'm not sure. */
    bottom:0;
}

对于您的 HTML，只需添加类:

<img class="img-side" ... />
<img class="img-side bottom" ... />

如果您计划在侧边栏中添加内容，您需要在侧边栏的顶部/底部添加适当的填充，这样您的内容就不会覆盖您的图像(除非设计如此)。

更新

请注意，您必须将侧边栏设置为相对位置，以便您的 IMG 元素使用它进行定位。您可以将 CSS 更新为更像这样:

.sideBar{ /* left will be default */
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    width:174px;
    position:relative;
}

.sideBar.right{
    background:url(../images/rightSide.jpg) repeat-y;
    float:right;
}