1

我在正确使用该overflow属性时遇到问题。我正在使用 Boostrap 粘页脚，我不知道要设置什么来overflow:hidden;防止我的页面元素超出页面上的粘页脚，如下所示：JSFiddle

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

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

 * {
      overflow:hidden;
   }

但是，这会破坏继承相同样式表的其他内容。任何关于解决这个问题的意见都会非常好。

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

4

2 回答 2

1

不要溢出，试试这个新的 css。

演示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%;
}
于 2013-06-06T03:24:51.497 回答
1

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

<!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>

将所有内容（除了页脚内容）放在.containerdiv 中，并确保页脚中的内容不超过 26px。例如，其中的任何<p>元素都不能有自动上/下边距。否则页脚会爆裂，设计就会中断。这就是粘性页脚布局的限制：页脚具有固定的高度。

于 2013-06-06T03:58:17.320 回答