overflow:隐藏忽略底部填充
overflow:隐藏忽略底部填充
提问于 2012-01-24 11:54:12
在下面的示例中，底部填充被忽略，文本在隐藏之前排列到元素的底部。是什么导致了这种情况？
<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px;">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>带有Firebug的视图(紫色是填充，蓝色是实际内容区域)：
回答 8
Stack Overflow用户
发布于 2013-01-16 22:46:50
我更喜欢使用尽可能少的<div>。
<div class="container">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
.container{
padding: 30px 30px 0;
position: relative;
width: 240px;
height: 170px;
border:1px solid #000;
overflow: hidden;
}
.container:after{
content: ' ';
display: block;
background-color: red;
height: 30px;
width: 100%;
position: absolute;
bottom: 0;
}在没有IE <9的世界中自然
Stack Overflow用户
发布于 2012-01-24 12:09:14
底部填充存在，但内容将底部填充向下推，并且由于overflow:hidden而不可见。您可以将内容放在容器中，如下所示：
<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
<div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>
</div>你可以在这里拉小提琴- http://jsfiddle.net/BMZeS/
希望这能有所帮助。
Stack Overflow用户
发布于 2014-02-01 00:15:27
我玩得有点晚，但是填充呈现的内部内容与内容区域相同(这是它与边框或边距的不同之处之一)。
Learn More About the Box Model
如果您将背景颜色或背景图像设置为带有填充的div，您将最清楚地注意到这一点。背景颜色/图像延伸到内容部分之外，并出现在填充区域内。
解决方案是设置一个边际。或者填充和页边距的组合(其中没有底部填充，而是相同高度的底部页边距。
<div style="overflow: hidden; width: 300px; height: 100px; margin:50px;">
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
<p>Hello, this is text.</p>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8981811
复制相关文章
相似问题