在下面的示例中,底部填充被忽略,文本在隐藏之前排列到元素的底部。是什么导致了这种情况?
<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的视图(紫色是填充,蓝色是实际内容区域):
发布于 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的世界中自然
发布于 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/
希望这能有所帮助。
发布于 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>
https://stackoverflow.com/questions/8981811
复制相似问题