无法在页脚中设置背景颜色

Question

大家好，我正在尝试在 div 标签中设置背景颜色，但是没有任何反应。我觉得我的 div 中有一个浮动元素，但我没有任何办法解决它。

HTML

<div id='footer'>
      <h5>©Krish International Inc.
      </h5>
    </div>

CSS

   #footer {
        background-color: deepskyblue;
      }
 h5 {
    font-weight: normal;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'hind';
@font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }

Answer 1

关于position:absolute：

When set to absolute or fixed, the element is removed completely from the normal flow of the document.

原因：

h2 have position absolute so removed completely from the normal flow of the document and #footer get height:0

修复：

You must define height or min-height for #footer.

 #footer {
        background-color: deepskyblue;
        height: 100px;<------------Added
       //Or min-height:100px;
}

 #footer {
        background-color: deepskyblue;;
        height: 100px;
  }

 h5 {
    font-weight: normal;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-family: 'hind';
  }

@font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }

  <div id="footer">
      <h5>©Krish International Inc.
      </h5>
    </div>

Answer 2

为什么使用 position:absolute; 只是通过以下方法获得它。

如果你需要使用 position 那个父 div 在你不给之前默认不会得到身高。因为当我们使用 position: absolute div 或标签时，流出。

  #footer {
  background-color: deepskyblue;
  width: 100%;
}

h5 {
  font-weight: normal;
  /* position: absolute; */
  width: 100%;
  display: block;
  text-align: center;
  font-size: 30px;
  font-family: 'hind';
  @font-face {
    font-family: 'hind';
    src: url('C:/Users/lakes/Desktop/hind2.ttf')
  }

<div id='footer'>
  <h5>©Krish International Inc.
  </h5>
</div>

无法在页脚中设置背景颜色

Can't set background color in footer

html

css

css-float