0

我的网页目前有以下布局：

  <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;
}

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

4

2 回答 2

1

您是否尝试过使用inline-block而不是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/

于 2013-05-24T22:18:15.170 回答
0

我会以不同的方式处理这个问题。使用与您的示例相同的 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 */
}

我将侧边栏定位固定。通过将底部和顶部属性都设置为 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/

于 2013-05-24T22:20:16.387 回答