Question

在以下示例中，将忽略底部填充，并且文本将在隐藏之前流向元素的底部。造成这种情况的原因是什么？

<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的视图（紫色是填充，蓝色是实际内容区域）：

Firebug

Answer 1

我更喜欢使用尽可能少的<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;
}

http://jsfiddle.net/bgaR9/

自然而然地在没有IE的世界中＆lt; 9

Answer 2

底部填充存在，但内容将底部填充向下推，因溢出而无法看到：隐藏。您可以做的是将内容放在容器中，如下所示：

<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/

希望这有帮助。

Answer 3

我的游戏时间有点晚，但Padding将内部内容与内容区域相同（这是与Border或Margin不同的方式之一）。

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>

http://jsfiddle.net/Uhg38/

Answer 4

如果不添加第二个div，我认为你不会得到你想要的效果。

http://jsfiddle.net/Mxhzf/

（添加背景颜色以明确发生的事情）

HTML：

<div id="outer">
    <div id="inner">

        <!-- CONTENT HERE -->

    </div>
</div>

CSS：

#outer{
     width: 300px;  
     height: 300px; 
    padding: 20px;
}

#inner{
     width: 300px;
    height: 300px;
    overflow: hidden;
}

Answer 5

如果您的CSS一起使用padding-bottom和overflow:hidden，则会导致您描述的问题。

最佳解决方案是：

<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>

Click here for live demo

Answer 6

溢出与填充无关。填充更像是一个内部边界＆＃34;在这种情况下。如果您希望隐藏溢出，则需要更改框的实际大小，并使用0px的下边距。溢出仍会显示在您的填充中。

又名：

<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>

填充和边距在CSS中总是这样：左上角（按顺序）

如果任何值为0px，则可以简单地使用零。像：

padding:0;

或：

padding: 0 10px 0 0;

必须使用px，em或pt。

指定除零以外的任何值

Answer 7

我知道现在有点老了，但我最近遇到了这个问题并通过增加一个额外的内部div来修复它。这个内部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;
}

http://jsfiddle.net/7xhuF/1/

Answer 8

将内容包装在带有剪辑属性!!的div中。

查看holdin的答案@ How can I force overflow: hidden to not use up my padding-right space

Answer 9

我发现最简单的方法是使用

在父级和子级之间添加元素

overflow:hidden;
height:100%;

http://jsfiddle.net/va78jsm5/2/

然后我不必担心匹配中间元素的高度/边距。

Answer 10

答案很晚，但是我想使用 CSS 提供一种非常新颖而优雅的解决方案。一个可能涉及::after个伪元素，但更可持续的解决方案是：

    #mydiv p:last-child{
        margin-bottom:50px;
    }

假设div可以带有id或class进行标识。在此解决方案中，最后一个<p>元素将填充缺少的底部空间。

不再有嵌套的节点，也不再需要HTML！雅皮！

溢出：隐藏忽略底部填充

10 个答案: