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

标签： html css size height containers

2条回答

Explosion°爆炸

2楼-- · 2019-08-08 10:56

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.

0人赞添加讨论(0) 举报

来，给爷笑一个

3楼-- · 2019-08-08 11:09

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/

0人赞添加讨论(0) 举报

Content container to fit screensize?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间