Question

我有一个高度，填充和溢出的元素：隐藏。它的子元素尊重顶部和侧面填充，但它重叠到父级的填充底部。我该如何防止这种情况？

#parent{
    background:yellow;
    overflow:hidden;
    width:100px;
    height:100px;
    padding:25px;
}

<div id = "parent">
  <div id = "child">  
      text text text text text text ...
  </div>
</div>

编辑：回应一下这与overflow:hidden ignoring bottom padding相同的建议，但事实并非如此。我的问题的最终答案比任何其他问题的答案都要优雅得多，因为我的设置不同：我只有一个子元素。

Answer 1

像这样添加一个父div

<div class="test">
<div id = "parent">
  <div id = "child">  
      text  text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>
</div>

添加此css

.test{
    width:100px;
    padding:25px;
     background:yellow;
}
#parent{
   height:100px;
    overflow:auto;

}

Answer 2

你应该这样使用 -

#child {
   height: 100%;
   overflow: hidden;
}

#parent{
  background:yellow;
  overflow:hidden;
  width:100px;
  height:100px;
  padding:25px;
}

#child {
  height: 100%;
  overflow: hidden;
}

<div id = "parent">
  <div id = "child">  
      text  text text text text text text text text text text text text text text text text text text text text text text text 
  </div>
</div>

<br/>
<div>
    There should also be padding on the bottom of the yellow square.
</div>

Answer 3

您可以将do shell script和height添加到overflow。

Jsfiddle

#child

CSS：获取子元素以尊重父级的padding-bottom

3 个答案: