Question

我很确定这会被（正确地）标记为重复，因为它是一个非常基本和新手的问题，但我无法找到答案o.O

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

HTML：

<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>More and more content</p>
</div>

<footer>
    <p>footer.</p>  
</footer>

风格：

.content {
    color:green;
}

footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
}

但这个页脚将会覆盖＆＃34;我的内容，如果后者足够长。所以我添加了＃margin-bottom：110px＆＃39;到.content，这〜等于页脚的高度：

.content {
    margin-bottom: 110px;
}

它＆＃34;工作＆＃34;。但我想避免明确地将.content的边距设置为任何特定的绝对值。主要是因为页脚的高度因页面而异。

以下是我现在的情况：https://jsfiddle.net/kpion/nmdsuca4/6/ 点击＆＃34;更改页脚大小＆＃34;显示我的意思。

喜欢的东西如果有效的话，.content {margin-bottom：calc（footer.height + 10px）}就是我想要的。

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

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

Answer 1

使用position: sticky作为页脚而不是fixed

检查一下：

＆＃13;

footer {
    background: red;
    opacity:0.4;
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    margin-top: 10px;
}

＆＃13;

<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <div id = 'test1wrap'>
    Works fine, but: 
    <button id = 'test1'>
      Change footer size
  </button>     
  </div> 
</div>
<footer>
  That's a footer.
</footer>

＆＃13;

Answer 2

您可以使用Flex实现以下方式，无需使用任何位置：

＆＃13;

my_list <- structure(list(`1` = structure(list(year = 1900, values = c(1, 
2, 3, 4, 5), another_attribute = "hello"), .Names = c("year", 
"values", "another_attribute")), `2` = structure(list(year = 1901, 
    values = c(11, 12, 13, 14, 15), another_attribute = "thankyou"), .Names = c("year", 
"values", "another_attribute"))), .Names = c("1", "2"))

＆＃13;

html,
body {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding:0;
  margin:0;
}
.content {
  background-color: blue;
  flex: 1;
  overflow:auto;
  text-align: center;
  padding:10px;
}
footer {
  text-align: center;
  background-color:red;
}

＆＃13;

Answer 3

如果您想修改页脚并在其上方显示内容而无需更改不透明度或隐藏某些内容，我认为这将与您合作。

＆＃13;

let sel = (s)=>document.querySelector(s);

sel('#test1').addEventListener('click', ()=>{
	sel('footer').style.height = '200px';
  sel('#test1wrap').innerHTML += ' ...and now it covers content again';
})

＆＃13;

/*
I don't want the footer to cover the content. I would like to say - content: height - make it 'auto' plus height of the footer.

The trick with 'margin' works fine, but I don't want to to explicitly set it to an absolute value (here: 110px).

Also, if the footer's height increases, it again covers the contents.
*/

.con {
    height:75vh;
    color:green;
    overflow:hidden;
}

.content{
  height:75vh;
  width:calc(100% + 20px);
  overflow: auto;
}

footer {
    background: red;
    opacity:0.4;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20vh;
    
}

＆＃13;

<div class="con">
<div class = 'content'>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <div id = 'test1wrap'>
    Works fine, but: 
    <button id = 'test1'>
      Change footer size
  </button>     
  </div> 
</div>
</div>
<footer>
  That's a footer.
</footer>

＆＃13;

页脚既固定又不覆盖内容（不使用显式值）

3 个答案: