Question

我正在使用bootstrap来创建页面布局。我的页脚按照here所述绑定到页面底部。这很好用。

但是当我将一个页脚放在容器内部的相对位置时，我无法将页脚绑定到页面底部。这是示例

html,
body{
  height:100%;
  margin:0;
  padding:0;
}

.container{
  position:relative;
  min-height:100%;
  height:auto !important;
  height:100%;
}

header{
  height:120px;
  background-color:#eee; 
}

.middle{
  background-color:#aaa;  
}

footer{
  height:120px;
  background-color:#888;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
  <div class="container">
    <header>
      Header
    </header>
    <div class="middle">
      Middle
    </div>
    <footer>
      Footer
    </footer>
  </div>
</body>
</html>

是否可以只使用CSS？

Answer 1

您需要将此css代码添加到页脚

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}

这会将页脚放在第一个父级的底部，并具有相对位置，在这种情况下是容器div

如何使用相对父位置将页脚绑定到页面底部？

1 个答案: