Content container to fit screensize?

问题

If got a very basic layout, with a header, content container and a footer. What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).

I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.

Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.

Here is a part of my code:

HTML:

<body>
    <div class="background"></div>
        <div class="page">
            <div class="header">
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>
</body>

CSS:

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
.page {
    position:relative; 
    height:100%;
    z-index:1; 
}
.content {
    position:relative;
    width:850px;
    height: 100%;
    margin: 0 auto;
    background: url(images/content.png) 0 0 repeat-y;
}

回答1:

I think this what you need (the footer will be always sticked to the bottom)

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; // IE HACK
}

HTML

<div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>

Tested in all major browsers. DEMO.

回答2:

What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.

http://ryanfait.com/sticky-footer/

来源：https://stackoverflow.com/questions/12341415/content-container-to-fit-screensize

标签

html

css

size

height

containers