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（如果可以的话，可以远离浮动）。

无论如何，使用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/

Answer 2

我会稍微改变一下。使用与样本相同的html，我的css看起来像这样：

.left-content-bar{
    position:fixed;
    width: 10px;
    left: 0;
    top: 0;
    bottom: 0;
    background:url(/default/images/content-left.png) repeat-y;
}
.right-content-bar{
    position:fixed;
    width: 10px;
    top: 0;
    right: 0;
    bottom: 0;
    background:url(/default/images/content-right.png) repeat-y;
}
.inner-content{
    padding: 0 10px; /* same padding left and right as the width of the sidebars */
}

我把侧边栏固定好了。通过将bottom和top属性都设置为0，它们会向上延伸到视口的高度。然后在实际内容包装器中添加一些填充，确保侧边栏和内容不重叠。

我设置了一个小示例来演示：http://jsfiddle.net/4Swvu/1/

随意询问您是否需要更多解释。

修改
如果您希望在内容上使用侧边栏，而不是在视口上，则可以稍微调整代码。该技术也适用于绝对位置，因此您可以使您的CSS看起来像这样：

.content-body { position: relative; width: 400px; margin: 0 auto; } .left-content-bar{ position:absolute; width: 10px; left: 0; top: 0; bottom: 0; background:#cff; } .right-content-bar{ position:absolute; width: 10px; top: 0; right: 0; bottom: 0; background:#cff; } .inner-content{ padding: 0 10px; /* same padding left and right as the width of the sidebars */ }

和小提琴：http://jsfiddle.net/4Swvu/5/

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

2 个答案: