html页脚挡住内容,html – 页脚既固定又不覆盖内容(不使用显式值)

我很确定这会被(正确地)标记为重复,因为这是一个非常基本和新手的问题,但我找不到答案o.O

我想要的是一个固定的页脚,所以我这样做：

content

content

More and more content

footer.

样式：

.content {

color:green;

}

footer {

position: fixed;

left: 0;

right: 0;

bottom: 0;

height: 100px;

}

但如果后者足够长,这个页脚将“覆盖”我的内容.所以我将’margin-bottom：110px’添加到.content,这〜等于页脚的高度：

.content {

margin-bottom: 110px;

}

它“有效”.但我想避免明确地将.content的边距设置为任何特定的绝对值.主要是因为页脚的高度因页面而异.

就像是

如果有效的话,.content {margin-bottom：calc(footer.height 10px)}就是我想要的.

顺便说一下,javascript只是解释我的问题,实际上我不想用javascript来实现我想要的.

BTW2：请记住,我真的希望页脚固定,即始终在那里,可见.因此,我们向下滚动然后看到它的大多数解决方案都不是我需要的.