我这里有点问题。我有以下 CSS 代码:
body
{
margin: 0 0 200px; //Same height of the footer
}
div.content
{
display: table;
margin: 0 auto;
}
div.main-content
{
margin: 20px 10px;
text-align: left;
background-color: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
通过这种方式,在我使用的所有页面中:
<div class='content'>
<div class='main-content'>
//Page content goes here
</div>
</div>
<footer>
//Footer content goes here
</footer>
我的问题是,如果分辨率低于内容,页脚就不会保持页面的宽度,变成这样:
我也创建了这个显示问题的 fiddle :http://jsfiddle.net/pmb1vbdh/1/
看到页脚如何不随表格展开并留有空白吗?
我该如何解决这个问题?谢谢!
最佳答案
它有效。检查这个。
div.content
{
display: table;
margin: 0 auto;
}
div.main-content
{
margin: 20px 10px;
text-align: left;
background-color: rgba(255, 255, 255, 0.95);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 15px;
-webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.75);
}
footer
{
position: absolute;
left: 0;
bottom: 0;
height: 200px;
width: 100%;
overflow: auto;
background-color: rgba(67, 191, 115, 0.95);
}
<div class='content'>
<div class='main-content'>
//Page content goes here
</div>
</div>
<footer>
//Footer content goes here
</footer>
编辑其他人回答中的评论;
关于html - 页脚宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30289281/