如何将溢出设置为隐藏以保护元素适当地超出页脚？

Question

I'm having issues correctly using the overflow attribute. 使用overflow属性时，我遇到了正确的问题。 I am using the Boostrap sticky footer, and I am at a loss as to what to set to overflow:hidden; 我正在使用Boostrap粘性页脚，并且对于要设置为overflow:hidden;的内容不知所措overflow:hidden; to prevent my page elements from breaking beyond the sticky footer on my page like so: JSFiddle 以防止我的页面元素超出页面上的粘滞页脚，如下所示： JSFiddle

I tried both setting the page's element container's overflow attribute to hidden, and the footer's (which I know is not the proper use case, but still.), to no avail. 我尝试将页面的元素容器的overflow属性设置为hidden，并将页脚的（我知道这不是正确的用例，但仍然如此）都无济于事。

My solution was to set all to overflow:hidden like so: 我的解决方案是将所有内容设置为溢出：

 * {
      overflow:hidden;
   }

however, this breaks other things that inherit the same style-sheet. 但是，这会破坏继承相同样式表的其他内容。 Any input as to go about solving this would be excellent. 任何有关解决此问题的意见将是极好的。

Any input as to how to go about doi 任何关于doi的信息

Answer 1

Instead of overflow, Try this new css. 尝试使用新的CSS，而不是溢出。

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

CSS 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

Sticky footers are tricky, and there are only a couple of methods that work, and they have to be followed exactly. 粘性页脚很棘手，只有几种方法可以使用，必须严格遵循它们。 You have some errors in your sticky footer setup that make it not work. 粘性页脚设置中存在一些错误，使其无法正常工作。 Here's a stripped down version of your page with the fixes you need: 这是页面的精简版本，其中包含您需要的修复程序：

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

Put all of your content (apart from footer content) inside the .container div, and make sure that the content in the footer doesn't exceed 26px. 将所有内容（除了页脚内容）放入.container div中，并确保页脚中的内容不超过26px。 For example, any <p> element in there must not have auto top/bottom margins on it. 例如，其中的任何<p>元素都不得在其上有自动上/下边距。 Otherwise the footer will blow out and the design will break. 否则，页脚将爆裂并且设计将中断。 That's the limitation of sticky footer layouts: the footer has a fixed height. 那就是粘性页脚布局的局限性：页脚具有固定的高度。

如何将溢出设置为隐藏以保护元素适当地超出页脚？

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-06-06 03:24:51

CSS CSS

解决方案2
1 2013-06-06 03:58:17

如何将溢出设置为隐藏以保护元素适当地超出页脚？

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-06-06 03:24:51

CSS CSS

解决方案2 1 2013-06-06 03:58:17

解决方案1
1 已采纳 2013-06-06 03:24:51

解决方案2
1 2013-06-06 03:58:17