Question

问题就像标题所述，在谷歌上搜索并查看这里的帖子后，我还没有找到适合我的解决方案。由于侧栏在固定尺寸设计内，实现了包装。

CSS：

#container {
    width: 100%;
    float: left;
}

#content {
    padding: 0px 270px 20px 30px;
    background-image: url("../images/mainbg.jpg");
    border:1px solid #1a1a1a;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    box-shadow: 2px 2px 2px #000000;
}

#sideRight {
    float: right;
    width: 200px;
    margin-left: -250px;
    margin-right: 10px;
    padding: 2px 0px 30px 38px;
    background-image: url("../images/sidebarlight.png");
    background-repeat:repeat-y;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
}

JSFiddle：http://jsfiddle.net/6LTFH/

网站：http://www.debbie.travismoore.co.uk/

感谢任何帮助，干杯

Answer 1

检查虚拟列方法http://alistapart.com/article/fauxcolumns 我发现这是处理此类案件的最佳方式。

Answer 2

没有简单的方法:) ...（除了使用css表）

下面介绍了最简单的解决方案： Set column to full height of the page $（ '＃块'）的高度（$（文件）.height（））;

但是如果你想深究它，请阅读这些文章： http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height

http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/

祝你好运，我们希望他们很快发布flexbox;）

如何设置侧边栏高度以匹配主要内容高度？

2 个答案: