与页眉和页脚和动态内容高度的CSS的div

我想要构造具有与像 header_bg 与页眉和页脚和动态内容高度的CSS的div

一些内容与位于y重复一个像素的背景的背景报头一个div（或不？）

，并与像 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

我希望我证明清楚的问题干杯

来源

2011-03-20 Argiropoulos Stavros

您是否有链接，以便我可以查看它？ – 2011-03-20 16:38:10

@ J.T.S。 http://infodim.eu/test2/test.html – 2011-03-20 16:47:50

你可以试试？

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

来源

2011-03-20 17:04:47

我不会按照自己的方式（使用大图像）完成它，但使用较小的页脚+标题图像和重复的主体（将标题/页脚图像放置在内容中的2个div上） – 2011-03-20 17:06:09

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

来源

2011-03-20 16:01:58

@ Coding-Freak.Take看看编辑过的问题 – 2011-03-20 16:23:18

只要给＃内容元素也与只包含图像的中间部分重复-Y背景图像。

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

来源

2011-03-20 16:05:29 n3on

@ n3on。看看编辑过的问题 – 2011-03-20 16:24:37

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

它添加到CSS和写入

标签内的内容的div内的文本。

如：

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

来源

2011-03-20 16:32:05

@ Coding-Freak。我的问题不在于填充。我知道该怎么做。问题是我想将文本定位在页眉和页脚的顶部。我认为这些图像完全显示了问题。请不要让' t只是编辑已经给出的答案 – 2011-03-20 16:37:52

你能负边距添加到的#header和＃内容拉＃内容较上年头和#footer的了＃内容

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

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

下，唯一的问题是没有太多的内容发生了什么页脚将PUL导入到标题中，但是您可以使用＃内容上的最小高度来停止此操作这里是一个jsfiddle http://jsfiddle.net/s295h/1/

来源

2011-03-21 03:59:48 Gilsham

与页眉和页脚和动态内容高度的CSS的div

回答

相关问题