Question

想要制作如下图所示的页面布局。有三个主要组成部分frameleft，framemid和frameright。虽然framemid包含页面内容，但其他两个组件只是其中包含透明.png文件的边框。

问题是如何使frameleft和frameright与framemid正确缩放？我在前面here发现了一个类似的问题，但是当接受的问题（完全没有解决问题）后面的答案所描述的技术不适用于侧面组件中的图像是透明的。 / p>

Layout

到目前为止，我的解决方案依赖于将这些组件安装在div中并手动设置其高度。这显然不是最优的，因为我理想情况下整个合奏从framemid推断出这个高度。

HTML 包含具有预定义高度的div内的三个组件。

<div style="height: 500px">
    <div class="frameside frameleft"></div>
    <div class="framemid"> some content </div>
    <div class="frameside frameright"></div>
</div>

CSS 会根据外壳组件缩放侧面图像。

.frameside {
    background-repeat: repeat-y;
    float: left;
    width: 10px;
    height: 100%;
}

.frameleft { background-image: url("frame_left.png"); }

.frameright { background-image: url("frame_right.png"); }

.framemid {
    width: 500px;
    float: left;
}

我宁愿不必接受CSS3或HTML5解决方案/技巧，因为这必须适用于大多数浏览器。

修改

请参阅此jsfiddle，由Warface提供，以获得可播放版本。

Answer 1

<强>已更新

然后看看这个

http://jsfiddle.net/kAesm/3/

将html，body设置为100％height然后在frameid上设置min-height为100％它应该做的伎俩。只需删除我添加的边框，便于查看。

添加

html, body{
   height:100%;
}

也可以修改

.frameid{
   ...
   min-height:100%;
}

链接示例

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

Answer 2

检查出来：http://jsfiddle.net/thilakar/kAesm/11/

请添加以下样式

.container div{
    padding-bottom:300px;
    margin-bottom:-300px;
}

上面的样式会影响三个div（frameleft，frameid和frameright），还可以添加一个样式容器部分

.container {
   overflow:hidden;    
}

低于完整部分

HTML

<div class="container">
    <div class="frameside frameleft">Left</div>
    <div class="framemid">
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>
        <p>some content
            sdfklsjdf
            lsdkfjsdlfkj
        </p>        
        </div>
    <div class="frameside frameright">Right</div>
</div>

CSS：

html,body{
    height:100%
}

.frameside {
    background-repeat: repeat-y;
    float: left;
    width: 30px;
    background:#ccc;
}
.container {
 overflow:hidden;   
}
.container div{
    padding-bottom:300px;
    margin-bottom:-300px;
}

.frameleft {
    background-image: url("frame_left.png");
    float:left;
}
.frameright {
    background-image: url("frame_right.png");
    float:left;
    background:#ccc;
}

.framemid {
    width: 300px;
    float: left;
    background:#999;
}

Answer 3

确定。我知道你没有要求脚本解决方案，但jQuery可以很容易地做到这一点。

var h = $('.framemid').height();
$('.frameside').height(h + 'px');

http://jsfiddle.net/jasongennaro/kAesm/7/

Answer 4

除了背景之外，还有什么东西需要左/右吗？ - thirtydot

@thirtydot也许在   未来 - “是”，但现在让我们说“不”。

如果有东西需要进入，可以选择：http://jsfiddle.net/M5UqW/ （尝试调整窗口大小）

适用于IE7 +和所有现代浏览器。

<强> HTML：

<div class="frameouter">
    <div class="frameside frameleft"></div>
    <div class="framemid">content</div>
    <div class="frameside frameright"></div>
</div>

<强> CSS：

.frameouter {
    border: 2px solid #444;
    overflow: hidden;
    position: relative
}
.frameside {
    background-repeat: repeat-y;
    width: 10px;
    position: absolute;
    top: 0;
    bottom: 0
}
.frameleft {
    background-image: url(http://dummyimage.com/64x64/f0f/fff);
    left: 0
}
.frameright {
    background-image: url(http://dummyimage.com/64x64/00f/fff);
    right: 0
}
.framemid {
    margin: 0 10px;
    background: #ccc
}

Answer 5

我见过3个，6个，10个url的jsfiddle示例都没有在IE8中运行。你为什么不用桌子试试呢？

具有透明边框图像的容器的CSS样式

5 个答案: