Question

很多定位问题似乎很容易通过CSS显示解决：表规则，所以我想我试一试。唯一的问题是，当我这样做时，页脚完全消失，我不明白为什么。

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 with 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;
    }
  }
}

我试图从此codepen中复制一个示例：

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%;

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

如何使用CSS显示添加页脚：table？

1 个答案: