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

Posted 2023-03-06

【中文标题】使用溢出时没有滚动条：自动和 div 高度

【英文标题】：No scrollbar when using overflow:auto and div heights

【发布时间】：2012-04-04 01:58:18

【问题描述】：

这是一个非常基本的问题，但我的大脑无法正常工作，并且多次尝试解决这个问题都没有结果。我在父级中使用溢出：自动，以便它延伸到其子级<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;
    

【问题讨论】：

Position:absolute 总是弄乱布局。正常规则不适用。

【参考方案1】：

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

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

【讨论】：

您好，感谢您的回复，但这并不能解决问题。如果我取出最小高度，那么#homecasestudy 不会向下伸展以适应其任何内容。

您是否尝试过摆脱 position:absolute 规则？如果这没有帮助，我建议您为您的内容设置一个 jsfiddle，我们将从那里开始。

【参考方案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

【讨论】：

是的，你的立场是对的：绝对。谢谢你提醒我！我会找到另一种定位方式。非常感谢您为此付出的努力。