Question

我想构造一个div，它有一个带有背景的标题 header_bg

某些内容背景为一个像素在y处重复（或不是？）

和一个像这样的背景的页脚 footer_bg

导致div内容中包含一些文字的内容（正确结果） Correct result

我想用5行或50行文本得到相同的结果。

现在我有 HTML

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
    <div id="header"></div>
<div id="content">Text goes here
</div>
<div id="footer"></div>
    </body>
</html>

和 CSS

#header {
    width: 959px;
    height: 169px;
    margin:0 auto;
    padding:0;
    background: url(header.jpg);
}
#content {
    width: 959px;
    margin:0 auto;
    background: url(content.jpg);
    color: white;
}
#footer {
    width: 959px;
    height: 158px;
    margin:0 auto;
    padding:0;
    background: url(footer.jpg);
}

导致此（错误的结果） Wrong result

我希望我能清楚地证明这个问题干杯

Answer 1

你能试试吗？

HTML：

<div id="container_outer">
    <div id="container_inner">
        <div id="content">
             Your text goes here
        </div>
    </div>
</div>

CSS：

#container_outer {
    background:url(images/body.png) repeat-y center center;
}
#container_inner {
    background:url(images/footer.png) no-repeat center bottom;
    padding-bottom:10px;
}
#content {
    background:url(images/header.png) no-repeat center top;
    padding-top:10px;
}

Answer 2

你可以在#header和#content上添加一个负余量，将#content拉到标题上，将#footer拉到#content

下

#header{
    margin-bottom:-169px;
}

#content{
    margin-bottom:-158px;
}

唯一的问题是，如果页脚没有太多内容会被拉到标题中，但你可以使用#content上的min-height来阻止这个这是http://jsfiddle.net/s295h/1/

的jsfiddle

Answer 3

#header {
margin:0 auto;
padding:0;
background: url(images/header.png);
}


#content {
margin:0 auto;
padding:0;
background: url(images/body.png);
}



#footer {
margin:0 auto;
padding:0;
background: url(images/footer.png);
}

Answer 4

只需给#content元素一个背景图像，其中repeat-y只包含图像的中间部分。

#content {
    background: url(images/body.png) repeat-y;
}

Answer 5

#content p{
padding:10px;
width:939px;
}

将此内容添加到css中，并在

标记内的内容div中写入文本。

例如：

<div id="content"><p>content here</p></div>

带有页眉和页脚以及动态内容高度的Css div

5 个答案: