Question

我希望HTML元素（例如页脚）绝对位于页面底部，但同时我不希望它在视口较小时重叠内容（垂直调整浏览器的大小）看问题）。我希望页脚在视口较小时保留在内容之后以避免重叠。 是否有任何仅限CSS的解决方案？

这是一个显示问题的小提琴：http://jsfiddle.net/nunoarruda/owfz5eby/

<div>Content</div>
<footer>footer with absolute position</footer>

footer {
    width: 400px;
    background-color: #ccc;
    position: absolute;
    bottom: 0;
}

谷歌的主页实现了这一点，但我无法理解它是否只是一个CSS方法，还是需要JavaScript。这是Google页脚的屏幕截图position: absolute; enter image description here

以下是谷歌页脚在内容之后停留并且没有重叠的屏幕截图： enter image description here

任何帮助表示赞赏。提前谢谢！

Answer 1

试试这个。

<强> HTML

<div class="container">
    <h1>heading</h1>
    <p>My amazing content.</p>
</div>
<footer class="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</footer>

<强> CSS：

html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin: 0 0 60px 0;
    padding: 0;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
    margin: 20px 0;
}

<强> JSFiddle

Answer 2

这是flex解决方案。浏览器支持：IE 10 +

<强> JsFiddle Demo

＆＃13;

html {
    height: 100%;
}
body {
    margin: 0;
    min-height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
main {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: silver;
    /* height: 200px; */
}

＆＃13;

<main>main</main>
<footer>footer</footer>

＆＃13;

CSS table解决方案。浏览器支持：IE 8 +

<强> JsFiddle Demo

＆＃13;

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
    margin: 0;
}
.main, .footer {
    display: table-row;
}
.main {
    height: 100%;
}
.footer {
    background: silver;
    /* height: 200px; */
}

＆＃13;

<div class="main">main</div>
<div class="footer">footer</div>

＆＃13;

Answer 3

为了给你另一种选择，你可以使用calc将内容的高度设置为页脚高度的100％，然后给它min-height以适应您的需求 - 无需任何定位。

（全屏查看小部件并调整浏览器大小以查看其运行情况）

＆＃13;

*{box-sizing:border-box;margin:0;}
html,body{height:100%;}
main{
  background:#000;
  height:calc(100% - 50px);
  min-height:300px;
}
footer{
  background:#ccc;
  height:50px;
}

＆＃13;

<main></main>
<footer></footer>

＆＃13;

Answer 4

建立Pangloss＆＃39;回答，您可以在页脚上使用margin-top: auto;这样你不需要main元素CSS来推动页脚：

JSfiddle

CSS：

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
footer {
  background: silver;
  margin-top: auto;
}

HTML：

<main>main, or any other el here</main>
<footer>footer</footer>

Answer 5

为页脚提供z-index。
给出内容位置：相对，更高的z-index和背景颜色（这样当页脚在其后面移动时，它就不再可见了。）

如果您希望页脚在内容与内容发生碰撞之前稍微消失，您还可以为内容指定最小高度或填充底部。

 .content {    
     position:relative;
     z-index:2;
     background:#FFF;
 }

 footer {
     width: 400px;
     background-color: #ccc;
     position: absolute;
     bottom: 0;
     z-index:1;
 }

我更新了你的小提琴，告诉你我的意思。当页脚与内容发生碰撞时，它将在其下方滑动。 http://jsfiddle.net/owfz5eby/1/

如何避免未知高度粘性页脚与CSS重叠内容？

5 个答案: