overflow：隐藏忽略底部填充 [英] overflow:hidden ignoring bottom padding

问题描述

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

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>

使用Firebug的视图（紫色是填充，蓝色是实际内容区域）：

A view with Firebug (purple is padding, blue is actual content area):

推荐答案

我更喜欢使用尽可能少的< div> 。

I prefer to use as few <div>s as possible.

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

naturally in a world without IE < 9

这篇关于overflow：隐藏忽略底部填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！