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

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

jquery css html

Jquery 带有页眉和页脚以及动态内容高度的Css div,jquery,css,html,Jquery,Css,Html,我想构造一个div，它的头和背景是一样的某些背景为一个像素的内容在y处重复（是否重复？）还有这样背景的页脚在div内容中产生类似的文本（正确结果）我想有5行或50行文本相同的结果现在我有了这个HTML <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body>

我想构造一个div，它的头和背景是一样的

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

还有这样背景的页脚

在div内容中产生类似的文本（正确结果）

我想有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>

导致此（错误结果）

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

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

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

将其添加到css中，并将文本写入

标记的content div中

例如：

此处的内容

你能试试吗

HTML:

您可以向#页眉和#内容添加负边距，将#内容向上拉到页眉上方，将#页脚向上拉到#内容下方

唯一的问题是，如果没有太多内容，页脚将被拉到页眉中，但您可以使用#内容上的最小高度来停止此操作

这是一个jsfiddle它

@Coding-Freak。我的问题不在填充中。我知道怎么做。问题是我想把文本放在页眉和页脚的顶部。我想图像正好说明了问题。请不要重新发布答案。只需编辑已经给出的答案。你有链接让我检查吗out？@J.T.S.我不会用你的方式（用大图片）而是用较小的页脚+页眉图片和重复的正文（将页眉/页脚图片放在内容的两个div上）

#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);
}

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

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

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

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

#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;
}

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

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