Question

这是一个非常基本的问题，但是我的大脑并没有工作，多次尝试解决这个问题已经证明是无效的。我在父级中使用overflow：auto，以便它延伸到其子级<div>的高度。通常这适用于我，这次它不起作用：相反，它隐藏了多余的高度并放入滚动条，以便我可以向下滚动。这不是我想要的行为。这是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

通常，如果要扩展容器以适合其内容，请不要设置溢出规则。如果希望容器伸展，则不为其设置高度，如果没有高度，则溢出属性不执行任何操作。

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

Answer 2

溢出：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

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

2 个答案: