Question

我之前已经问过这个问题并得到了一个解决方案，但是当我按照自己的方式进行操作时，我发现解决方案不是最好的（建议将两者都设置为显示：table-cell）

当我在其中添加div时，高度会发生变化，布局就会失控。

我想要的是非常简单的，如图所示

[编辑：这是我遇到问题的主要原因，我正在尝试添加div以包含阴影] enter image description here

我希望纹理BG一直拉伸，与页面的高度一样高（因此内容随着纹理bg的变化而变化）

所以我做了一些像

这样的东西

<body>
<div id="page">
<div id="sidecolumn">
<div id="sidebar"></div>
</div>
<div id="maincolumn">
<div id="content"></div>
</div>
</div>
</body>

通过将所有div和body样式设置为高度：100％;但问题是，当我的内容超出页面限制（出现滚动条）时，纹理BG不会流过，它只是停在它的位置。假设屏幕高度为800px，如果内容超出并达到1000px，纹理化的bg将停止在800px。

当我尝试使用display：table-cell推荐给我的时候，带纹理的bg与内容一起流动，但我不能添加到我的侧栏中，因为当我这样做时，上面会有一个空白区域内容div。关于我应该如何处理这个问题的任何建议？

Answer 1

编辑：使用Xun Yang的方法可行。就像他自己说的那样，这是非常规的;）

小提琴：http://jsfiddle.net/Nu2wH/

html, body {
    height: 100%:
    padding: 0;
    margin: 0;  
}

#page {
    background: #444444;
    min-height: 100%; 
    height:auto !important; 
    height:100%;
    overflow: hidden !important;
    background: url("http://upload.wikimedia.org/wikipedia/commons/3/3e/Social_icons-google-22x22.png?uselang=de") repeat;
}

#sidecolumn  {
    width: 45%;
    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
    float: left;
}   

#sidebar {
    background: #ddd;
}
#maincolumn  {
    padding: 5%;
    width: 40%;
    float: right;
    background: #AA9933;
    height: 100%:
}    
#content {
    background: #ddd;
}

Answer 2

您可以为所有浏览器使用css 3声明background-size

background: url(images/bg.jpg) no-repeat center center fixed; //fallback for unsupported browsers and sets the background image
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

Answer 3

#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}

不是很传统，但有效：）

带边栏和内容的CSS 100％高度（div内）

3 个答案: