css – 使用overflow时没有滚动条：auto和div高度

2023年6月14日 269次阅读

这是一个非常基本的问题,但我的大脑没有工作,多次尝试解决这个问题已经证明是徒劳的.我在父级中使用overflow：auto,以便它延伸到其子级< 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;
    }

最佳答案 溢出：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

点赞