如何添加带有 CSS 显示的页脚：table？

Question

许多定位问题似乎可以通过 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。

Answer 1

您需要添加

width:100%;

到您的页脚。否则只会占满里面内容所需要的space。此外，某些浏览器不允许空 div。在页脚中添加一些内容，它应该会显示在浏览器中。 JSFiddle：https://jsfiddle.net/rq9nm772/1/

如何添加带有 CSS 显示的页脚：table？

How do you add a footer with CSS display: table?

css

footer

css-tables