我正在尝试将我的页脚页面放在底部,但在我的布局中它位于顶部。
这是我的代码。
样本结构
<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%,我会尝试检查整个身体是否会占用,但这是输出:
正如您所看到的,它并没有占据我的整个页面。
答案 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。现在,请考虑以下内容。
不要使用绝对值。相反,使用相对位置。 用于相对于其正常位置放置内容的相对位置。 用于将内容放置到最近的定位祖先的绝对位置。 有三种类型的位置:固定,相对,绝对和静态。
./