布局页脚100％的宽度和内容，直到页脚 [英] Layout footer 100% width and content till footer
问题描述
我被困住了，不知道如何解决.我的页脚有粘性，效果很好.但是我希望页脚宽度为100％.因此，我有一个外部div将页脚推到底部，而一个内容div居中.
Im stuck and have no idea how to solve. I have a sticky footer and that works fine. But I want the footer width 100%. For that reason i have a outer div which push the footer to the bottom and a content div which is centered.
通常，我会为整个外部div设置背景颜色.这意味着页眉，内容和页脚具有相同的背景色.我可以为每个div设置一种自定义颜色，该颜色会覆盖白色(覆盖层).
Normaly I set a background color for the full outer div. This means it that header, content and footer have the same background color. For each div i can set a custom color which overrides the white (overlay).
因为布局现在的宽度为100％，所以我无法使内容div具有被推到页脚的背景颜色.
Because the layout has now a width of 100% i cant get the content div a background color which is pushed till the footer.
我以前的故事有点复杂.我将简短/澄清我的问题.我怎样才能有一个页眉和页脚宽度为100％，内容居中的中间，背景颜色为白色，直到页脚?注意:内容可以扩展或小于100％的高度.
这是我使用的HTML:
Here is my used HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Temp</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer">
<div id="outer_header">
<div id="header">
<div id="menu_block"></div>
<div id="image_block"></div>
</div>
</div>
<div id="outer_content">
<div id="content">
dafdafdafda
</div>
</div>
<div id="clearfooter"></div>
<div id="outer_footer">Footer - | |- Footer </div>
</div>
</body>
</html>
还有我的CSS
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center; /* for ie6 and under */
min-width:1024px;
background-color: #eee8d8;
color: #000000;
}
#outer {
min-height:100%;
min-width:1024px;
width:100%; /* add 2px if borders are not used */
text-align:left;
margin:auto;
position:relative;
}
* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/
#outer_header {
height:280px;
width:100%;
float:left;
position:relative;
background-color:#1f4c3f;
}
#header {
height:280px;
width:1000px;
margin:auto;
position:relative;
}
#menu_block {
width:1000px;
height:90px;
}
#image_block {
width:1000px;
height:190px;
background-color:#FFFFFF;
}
#outer_content {
width:100%;
position:relative;
float:left;
background-color:red;
}
#content {
width:1000px;
height:100%;
position:relative;
margin:auto;
background-color:#FFFFFF;
}
#outer_footer {
width:100%; /* add 2px if borders are not used on the #outer div */
clear:both;
height:50px;
background-color:#1f4c3f;
left:0;
bottom:0;
position: absolute;
}
* html #outer_footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}
div,p {margin-top:0}/*clear top margin for mozilla*/
#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
Ps.如果可能的话，我只想使用CSS，而不是javascript
Ps. I want only use CSS if possible, no javascript
结果应该是
如您所见，图片一中有1行白色(因为文本在那结束)，但是我希望内容一直填充到粘性页脚...
As you can see, picture one has 1 row white (because the texts ends over there), but i want the content filled till the sticky footer...
推荐答案
这里有3种解决方案，具体取决于滚动行为.
Hereby three solutions, depending on whished scroll behaviour.
-
JSFiddle解决方案，没有滚动条:
标记:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
样式表:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
background: red;
}
#header {
height: 160px;
background: #1f4c3f;
}
#content {
position: absolute;
background: white;
width: 500px;
top: 160px;
bottom: 40px;
left: 50%;
margin-left: -250px;
}
#footer {
position: absolute;
bottom: 0;
background: #1f4c3f;
width: 100%;
height: 40px;
}
标记:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
样式表:
body, html {
margin: 0;
padding: 0;
width: 100%;
}
body {
background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
}
#header {
height: 160px;
background: #1f4c3f;
}
#content {
width: 500px;
margin: 0 auto;
}
#footer {
position: fixed;
bottom: 0;
background: #1f4c3f;
width: 100%;
height: 40px;
}
标记:
<div id="wrap">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
样式表:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#wrap {
background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y;
width: 100%;
min-height: 100%;
}
#header {
height: 160px;
background: #1f4c3f;
}
#content {
width: 500px;
margin: 0 auto;
padding-bottom: 40px;
}
#footer {
position: relative;
top: -40px;
background: #1f4c3f;
width: 100%;
height: 40px;
}
这篇关于布局页脚100％的宽度和内容，直到页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
