0

我以前问过这个问题并得到了解决方案，但是当我努力解决这个问题时，我发现解决方案不是最好的（建议将两者都设置为 display:table-cell）

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

我想要的很简单，就像显示的图像

[编辑：这是我遇到问题的主要原因，我正在尝试添加一个 div 以包含一个阴影] 在此处输入图像描述

我希望带纹理的 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 样式设置为 height:100%；但问题是，当我的内容超出页面限制（出现滚动条）时，带纹理的 BG 不会溢出，它只会停在原来的位置。假设屏幕高度为 800px，如果内容超出并达到 1000px，则纹理背景将停止在 800px。

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

4

3 回答 3

1

编辑：使用荀阳的方法会奏效。正如他自己所说，这只是非常规;）

小提琴：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;
}

​</p>

于 2012-08-22T09:12:43.740 回答
0 
#page
{
background:url(images/bg.png);
width:200px;/*Width of your sidebar*/
}
#maincolumn
{
margin-left:200px;/*width of your sidebar*/
}

不是很传统但很有效:)

于 2012-08-22T09:10:29.013 回答
0

您可以对所有浏览器使用 css 3 声明背景大小

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%;
于 2012-08-22T08:46:57.423 回答