CSS

Question

我在使用overflow属性时遇到问题。我正在使用Boostrap粘性页脚，我不知道如何设置为overflow:hidden;以防止我的页面元素突破我页面上的粘性页脚，如下所示：JSFiddle

我尝试将页面的元素容器的overflow属性设置为隐藏，而页脚（我知道这不是正确的用例，但仍然如此。），无济于事。

我的解决方案是将所有内容设置为溢出：隐藏如下：

 * {
      overflow:hidden;
   }

然而，这会破坏继承相同样式表的其他东西。任何关于解决这个问题的输入都会非常好。

关于如何进行doi的任何输入

Answer 1

尝试这个新的CSS，而不是溢出。

DEMO http://jsfiddle.net/eGs6u/2/

CSS

#footer {
    border-top:solid 1px #fe2b32;
    background: rgba(254, 43, 50, 0.5);
    z-index:2;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
}

Answer 2

粘性页脚很棘手，只有几种方法可行，并且必须严格遵循它们。您的粘性页脚设置中存在一些错误，使其无法正常工作。这是您页面的精简版本，其中包含您需要的修补程序：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

html, body {
  height: 100%;
  margin: 0; 
  padding: 0;
}

#wrap {
  min-height: 100%;
  margin: -27px auto 0;
}

.container {
  padding-top: 27px; 
  margin: 0 auto; 
  width: 80%;
}

#footer {
  height: 26px;
  border-top:solid 1px #fe2b32;
  background: rgba(254, 43, 50, 0.5);
}

</style>
</head>
<body>

<div id="wrap">
      <div class="container">
              container content
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              container content
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              container content
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              container content
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
     </div>
</div>

<div id="footer">
University of Toronto &copy; 2013
</div>

</body>
</html>

将所有内容（除了页脚内容）放在.container div中，并确保页脚中的内容不超过26px。例如，其中的任何<p>元素都不得包含自动顶部/底部边距。否则页脚会爆炸，设计会破裂。这是粘性页脚布局的限制：页脚具有固定的高度。

如何将溢出设置为隐藏以保护元素超出我的页脚正确？

2 个答案:

CSS