Html 溢出：隐藏忽略底部填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8981811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow:hidden ignoring bottom padding
提问by James Skidmore
In the following example, the bottom padding is ignored, and the text flows to the bottom of the element before hiding. What is causing this?
在下面的示例中，底部填充被忽略，文本在隐藏之前流到元素的底部。这是什么原因造成的？
<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>
A view with Firebug (purple is padding, blue is actual content area):
带有 Firebug 的视图（紫色是填充，蓝色是实际内容区域）：
回答by Marco Melluso
I prefer to use as few <div>s as possible.
我更喜欢使用尽可能少的<div>s。
<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;
}
naturally in a world without IE < 9
在没有 IE < 9 的世界中自然
回答by Sagar Patil
The bottom padding exists but the content pushes the bottom padding down and is not visible because of overflow:hidden. What you can do is place the content in a container like so:
底部填充存在，但内容将底部填充向下推，并且由于溢出：隐藏而不可见。您可以做的是将内容放入容器中，如下所示：
<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>
You can play with the fiddle here - http://jsfiddle.net/BMZeS/
你可以在这里玩小提琴 - http://jsfiddle.net/BMZeS/
Hope this helps.
希望这可以帮助。
回答by James Montagne
I don't think you're going to get the effect you are looking for without adding a 2nd div.
我认为如果不添加第二个 div，您将无法获得所需的效果。
(background color added to make it clear what is happening)
（添加了背景颜色以清楚显示正在发生的事情）
HTML:
HTML：
<div id="outer">
<div id="inner">
<!-- CONTENT HERE -->
</div>
</div>
CSS:
CSS：
#outer{
width: 300px;
height: 300px;
padding: 20px;
}
#inner{
width: 300px;
height: 300px;
overflow: hidden;
}
回答by isick
I'm a little late to the game, but Padding renders internal content the same as the content area (that's one of the ways it's different from a Border or a Margin).
我玩游戏有点晚了，但是 Padding 呈现的内部内容与内容区域相同（这是它与 Border 或 Margin 不同的方式之一）。
Learn More About the Box Model
You'll notice this most clearly if you set background colors or background images to divs with padding. The background color/image extends beyond the content portion and appears inside the padding area.
如果您将背景颜色或背景图像设置为带有填充的 div，您会最清楚地注意到这一点。背景颜色/图像超出内容部分并出现在填充区域内。
The solution is to set a margin instead. or a combination of a padding and margin (where there is no bottom padding, but instead a bottom margin of equal height.
解决方案是设置一个边距。或填充和边距的组合（没有底部填充，而是等高的底部边距。
<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>
回答by Dailey
If your CSS uses padding-bottomand overflow:hiddentogether,it will cause the problem you describe.
如果您的 CSS 使用padding-bottom和overflow:hidden一起使用 ，则会导致您描述的问题。
The best solution is:
最好的解决办法是：
<div style="padding: 50px; border:1px solid #000">
<div style="overflow: hidden; width: 300px; height: 100px;">
<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>
回答by Nereo Costacurta
Really late answer, but I want to give a really fresh and elegant solution with CSS. One could involve ::afterpseudo-elements, but a more sustainable solution is:
答案真的很晚，但我想用CSS给出一个非常新鲜和优雅的解决方案。一个可能涉及::after伪元素，但更可持续的解决方案是：
#mydiv p:last-child{
margin-bottom:50px;
}
assuming the div can have an idor a classto be identified with. In this solution the last <p>element will fill the missing bottom space.
假设 div 可以有 anid或 aclass来标识。在此解决方案中，最后一个<p>元素将填充缺少的底部空间。
No more nested nodes and fiddling with HTML! Yuppie!
没有更多的嵌套节点和摆弄 HTML！雅皮士！
回答by Tim
I know this is a bit old now, but I had this issue recently and fixed it by adding an additional inner div which has a margin.
我知道这现在有点老了，但我最近遇到了这个问题，并通过添加一个额外的内部 div 来修复它，它有一个边距。
.promo {
height: 100px;
width: 300px;
border: 1px solid black;
padding: 0px 10px;
overflow: hidden;
}
.inner {
height: 86px;
width: 100%;
margin: 7px 0px;
overflow: hidden;
}
.promo .inner p {
padding 0;
margin: 0;
}
回答by Vic
wrap the content in a div with a clip property!!
使用剪辑属性将内容包装在 div 中！！
check out heldin's answer @ How can I force overflow: hidden to not use up my padding-right space
查看holdin 的答案@How can I force overflow: hidden 以不使用我的填充右空间
回答by user984003
I found that the easiest way was to add an element between the parent and child with
我发现最简单的方法是在父级和子级之间添加一个元素
overflow:hidden;
height:100%;
http://jsfiddle.net/va78jsm5/2/
http://jsfiddle.net/va78jsm5/2/
Then I didn't have to worry about matching the height/margin of the middle element.
然后我不必担心匹配中间元素的高度/边距。
回答by jhilgert00
Overflow has nothing to do with padding. Padding is more like an "internal border" in this case. If you want the overflow to be hidden, you need to change the actual size of your box, and use a bottom-margin of 0px instead. Overflows will still show up in your padding.
溢出与填充无关。在这种情况下，填充更像是“内部边界”。如果您希望隐藏溢出，则需要更改框的实际大小，并使用 0px 的下边距。溢出仍会出现在您的填充中。
aka:
又名：
<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px 50px 0 50px; margin-bottom:0px;">
<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>
Padding and Margins always go like this in CSS: top right bottom left (in that order)
填充和边距在 CSS 中总是这样的：右上左下（按此顺序）
If any value is 0px, you can simply use a zero. like:
如果任何值为 0px，您可以简单地使用零。喜欢：
padding:0;
or:
或者：
padding: 0 10px 0 0;
Any value other than zero must be specified with px, em, or pt.
必须使用 px、em 或 pt 指定除零以外的任何值。
