css - 创建左/右边框的最佳方式

Question

我目前的网页布局如下:

  <div class="content-body">
    <div class="left-content-bar siteborder"></div>
    <div class="inner-content">
    ... some content
    </div>
    <div class="right-content-bar siteborder"></div>
  </div>

我为左右内容栏制作了一个重复的背景图片。我希望栏始终从页面顶部到页面末尾。我目前的问题是，条形图只占用与内部内容一样多的空间(条形图在内容的底部结束)

我找到了一个解决方案，让条形图始终位于底部，但这包括一个我不喜欢的最小高度，因为它会有很多空白和小屏幕分辨率。

查看此 css 以了解我当前的解决方案(高度始终为最小 1000px，而这不应该是):

.content-body{
position:relative;
overflow:hidden;
min-height: 1000px;
height: auto !important;
height: 1000px;
}
.left-content-bar{
    float:left;
    position:relative;
    width: 10px;
    background-image: url(/default/images/content-left.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px; 
}
.right-content-bar{
    float:left;
    position:relative;
    width: 14px;
    background-image: url(/default/images/content-right.png);
    background-repeat:repeat-y;
    margin:0px;
    padding:0px;
    padding-bottom: 32000px;
    margin-bottom: -32000px;    
}
.inner-content{
float:left;
width:956px;
position: relative;
height: auto;
min-height: 100% !important;
}

我希望任何人都可以给我一个比我现在更好的解决方案

Answer 1

您是否尝试过使用 inline-block 而不是 float ？

使用 float 最初是为了在图片周围显示文本，而不是按照您喜欢的方式显示 div(如果可以，请远离 float )。

无论如何，使用 display:inline-block; 可以将 3 个 div 并排放置，并使左右列到达底部。

.content-body{
    height:1000px;
}
.siteborder{
    height:100%;
    width:100px;
    display:inline-block;
    vertical-align:top;
}
.inner-content{
    width:150px;
    display:inline-block;
    vertical-align:top;
}

实例:http://jsfiddle.net/8vQrU/