Question

document的结构如下：

<body>
    <div>
        <div>
            content here
        </div>
    </div>
    <div class="page">
        <div class="nav-bar">
            <div class="nav-bar-inner padding10" >
                <span style="text-align: center;" >
                    2015, XXX &copy; by <a class="fg-color-white" href="mailto:xxx@xxx.com">XXX</a>
                </span>
            </div>
        </div>
    </div>
</body>

CSS就是这些：

.metrouicss {
}
.metrouicss .page {
  position: relative;
  height: 100%;
  min-height: 100%;
  width: 100%;
  *zoom: 1;
}
.metrouicss .page {
    width: 940px ;
    margin: auto;
    background-color: #fff;
}
.metrouicss .nav-bar {
  background-color: #2d89ef;
  position: relative;
  top: 0;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  z-index: 1000;
  *zoom: 1;
}
.metrouicss .nav-bar .nav-bar-inner {
  *zoom: 1;
}
.padding10 {
  padding: 10px;
}

在运行时，内容之后的<div class="page">就在内容之下！我希望它位于文档的底部。怎么做？

Answer 1

这是一个很好的教程，如何在页面底部保持阻止http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

基本上你只需要为你的块添加一些样式：

.metrouicss .page {
   position : absolute;
   bottom : 0;
}

Answer 2

您可以在其间添加一些空div，您可以在内容或邮件链接div所在的顶部边距下添加底部边距。

如何将此div放在文档的底部？

2 个答案: