Css div with header and footer and dynamic content height_问答_开发者

Css div with header and footer and dynamic content height

开发者 https://www.devze.com 2023-02-18 03:58 出处：网络

I want to construct a div that has a header with background like that some content with a background of one pixel repeated at y(or not?)

相关专题：css jquery

I want to construct a div that has a header with background like that

Css div with header and footer and dynamic content height

some content with a background of one pixel repeated at y(or not?)

and a footer with background like that

Css div with header and footer and dynamic content height

resulting in something like that with some text in the div content(Correct result)

Css div with header and footer and dynamic content height

I want to have the same result with 5 lines or 50 lines of text.

Right now i have this 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>

and this 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);
}

resulting in this(Wrong result)

Css div with header and footer and dynamic content height

I hope i demonstrated the problem clea开发者_运维技巧rly Cheers

Could you try that ?

HTML:

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

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

you could add a negative margin to the #header and #content to pull the #content up over the header and the #footer up under the #content

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

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

the only problem is what happens with not much content the footer will be pulled up into the header but you can use the min-height on the #content to stop this here is a jsfiddle of it http://jsfiddle.net/s295h/1/

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

Just give the #content element also a background-image with repeat-y which contains just the middle part of the image.

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

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

add this to the css and write the text inside the content div within the

tags.

eg:

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

Css div with header and footer and dynamic content height

精彩评论

关注公众号

热门标签

图文推荐

Css div with header and footer and dynamic content height

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：