内容容器适合屏幕尺寸吗？ [英] 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).
我尝试为我的身体分配一个高度100％的值，然后从那里分配我的内容容器高度设置为100％，但这会导致内容容器的大小达到全屏高度。
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;
}
推荐答案
我认为这是您需要的（页脚将始终停留在底部）
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.
这篇关于内容容器适合屏幕尺寸吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
