无法将页脚推到底部

时间:2017-05-04 05:59:10

标签: html css

我正在尝试将我的页脚页面放在底部,但在我的布局中它位于顶部。

这是我的代码。

样本结构

<body>
<!-- some codes here -->
<footer>
    <div id="main-footer">
        <div class="col-md-8 col-md-offset-2">
            <h1>hello world</h1>
        </div>
    </div>
</footer>
</body>

CSS

body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    position: relative;

    footer {
        position: absolute;
        bottom: 0; /** no effect **/
        min-height: 500px;
        background: #000;
        width: 100%;
        z-index: 4;
        /** top: 0; -- if enabled my footer goes on the top **/
    }

}

---更新了css ---

html { height: 100%; }
body {
    font-family: Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
    font-weight: 300;
    min-height: 100%;
}

footer {
    height: 100px;
    background: red;
    z-index: 5;
    position: absolute;
    width: 100%;
    min-height: 100px;
    bottom: 0;
}

如果我将高度设置为100%,我会尝试检查整个身体是否会占用,但这是输出:

enter image description here

正如您所看到的,它并没有占据我的整个页面。

2 个答案:

答案 0 :(得分:1)

请使用以下css代码,可能适合您。

class Entry(models.Model):
    blog = models.ForeignKey(Blog)
    headline = models.CharField(max_length=255)
    body_text = models.TextField()
    pub_date = models.DateTimeField()
    authors = models.ManyToManyField(Author)

    def msgtoat(self, message):
        self.authors.update(msgtoauthor=message)

答案 1 :(得分:1)

正确关闭你的css身体支架。另请参阅其他网站并了解如何编写/编写CSS。现在,请考虑以下内容。

不要使用绝对值。相反,使用相对位置。 用于相对于其正常位置放置内容的相对位置。 用于将内容放置到最近的定位祖先的绝对位置。 有三种类型的位置:固定,相对,绝对和静态。

./