使用溢出时没有滚动条：自动和 div 高度

Question

这是一个非常基本的问题，但我的大脑无法正常工作，并且多次尝试解决这个问题都没有结果。我在父级中使用溢出：自动，以便它延伸到其子级<div>s 的高度。通常这对我有用，这次它不起作用：相反，它隐藏了多余的高度并放入滚动条，这样我就可以向下滚动。这不是我想要的行为。这是 HTML：

<div id="homecasestudy">
<h2 class="homecasestudyheading">Case Study</h2>
<div id="homecasestudyleft"><h3>Lorem</h3><p>Ipsum</p></div>
<div id="homecasestudyright">
<div id="casestudyfrontpic"><img src="uploads/casestudies/1/casestudyex1.jpg" border="0" /></div><div id="paperclip"></div>
<div id="homecasestudyquote">Quote</div>
</div>
</div><!-- homecasestudy -->

还有 CSS：

#homecasestudy {
    width:389px;
    min-height:257px;
    background:url(../images/casestudybgtop.jpg) #E5E6E7 no-repeat;
    padding:13px 0 0 13px;
    position:relative;
    overflow:auto;
    }

#homecasestudyleft {
    width:200px;
    min-height:130px;
    float:left;
    margin:20px 0 0 10px;
    }

h2.homecasestudyheading {
    width:366px;
    height:25px;
    background:url(../images/casestudytitlebg.jpg) no-repeat;
    color:#005BA7;
    margin:0;
    padding:6px 0 0 8px;
    font-size:16px;
    }

#homecasestudyright {
    float:left;
    min-height:180px;
    }

#casestudyfrontpic {
    width:154px;
    height:160px;
    background:url(../images/casestudyfrontpic.png) no-repeat;
    padding:6px 0 0 9px;
    position:absolute;
    top:13px;
    right:8px;
    }

#paperclip {
    width:33px;
    height:58px;
    background:url(../images/paperclip.png) no-repeat;
    position:absolute;
    top:1px;
    right:125px;
    }

#homecasestudyquote {
    color:#6E7071;
    font-size:14px;
    font-weight:bold;
    width:147px;
    position:absolute;
    top:180px;
    right:10px;
    margin:0;
    padding:0;
    }

Answer 1

一般来说，如果您希望容器拉伸以适应其内容，请不要设置溢出规则。当你想让一个容器伸展时，你不需要为它设置一个高度，没有高度，overflow 属性什么都不做。

我建议您从#homecasestudy 中删除min-height 规则。这将使内容设置容器的高度，并且您应该看不到滚动条。不需要height 或overflow 规则。

Answer 2

Overflow:auto 在这里无法帮助您清除浮动。 #homecasestudy 正在扩展以包含孩子，但仅限于页面边界。

您可以尝试使用纯 CSS 的方法来清除 div。

#homecasestudy:after {
  content:'.';
  clear: both;
  display: block;
  height: 0px;
  text-indent: -999999em;
}

这会在#homecasestudy 中的所有其他内容之后生成块级元素，使用它来清除浮动，然后执行一些调整大小的技巧以确保样式规则不添加空格。

这个技巧在早期版本的 IE 中不起作用。在这些情况下，您应该将zoom: 1 添加到#homecasestudy 规则中以代替overflow: auto。

如果你的引用很长，它仍然会溢出框的边界，因为它是绝对定位的——没有“包含”绝对定位的项目的好方法。如果必须包含引用，请尝试找到一种使用浮点数的方法。

在此处查看一个工作示例。在本例中，我从报价框中删除了“绝对”。 http://dabblet.com/gist/2116495