很多定位问题似乎都可以通过 CSS display: table 规则轻松解决，所以我想试试看。唯一的问题是当我这样做时，页脚完全消失了，我不明白为什么。
html:
<body>
<div class="container-fluid" id="main_section">
<!--Main section-->
<div class="col-sm-11 col-xs-11" id="main_col">
{% block navbar %}
{% navbar %}
{% endblock %}
<hr/>
{% block body %}
{% endblock %}
<div class="footer">
</div>
</div>
</div>
css 与 sass:
#main_section {
padding: 0;
#main_col {
float: none;
margin: 0 auto;
padding: 0;
background: white;
height: 100vh;
text-align: center;
display: table;
.footer {
position: relative;
height: 20px;
background: gray;
color: gray;
display: table-row;
vertical-align: bottom;
}
}
}
我正在尝试从这个代码笔中复制一个示例:
http://codepen.io/colintoh/pen/tGmDp
但是页脚没有显示出来。您将如何解决这个问题？
编辑:
CSS:
#main_section {
padding: 0; }
#main_section #main_col {
float: none;
margin: 0 auto;
padding: 0;
background: white;
height: 100vh;
text-align: center;
display: table; }
#main_section #main_col .footer {
position: relative;
height: 20px;
background: green;
color: green;
display: table-row;
vertical-align: bottom;
width: 100%; }
我现在正在使用 Firefox。
最佳答案
你需要添加
width:100%;
到你的页脚。否则它只会占用适合内部内容所需的空间。此外，某些浏览器不允许空 div。在页脚中添加一些内容，它应该会显示在浏览器中。 JSFiddle:https://jsfiddle.net/rq9nm772/1/
关于css - 如何使用 CSS 显示 : table? 添加页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33223737/