CSS：抑制子元素的负边距答案

【问题标题】：CSS: Suppressing negative margins of child elementsCSS：抑制子元素的负边距
【发布时间】：2011-09-26 04:47:23
【问题描述】：

我有一个围绕一些动态内容的父元素（例如 div）。我希望父 div 在尽可能多的情况下完全包含子元素。

一个问题是具有负边距设置的子元素，这会导致子元素显示在父元素之外（并且还会导致父元素不是所需的大小）。

所以

是否有任何 css 技巧可以应用于父元素以抑制子元素中的负边距（例如，无需修改子元素的样式）。
如果做不到这一点，是否有办法通过 javascript 检测特定元素是否有溢出内容？（以及内容溢出的方向和程度？）

【问题讨论】：

您可以在父元素上使用正填充将子元素向后移动，它会改变高度和宽度。

标签： javascript css

【解决方案1】：

您是否尝试过像这样向父级添加一个类：

.parentDiv > * {
  margin:0 !important;
}

要让父级具有所需的高度，您还需要设置一些 css：

.parentDiv{
    overflow:hidden;
    position:relative;
    background:#DFE;
    padding:5px;
 }

【讨论】：

谢谢，我没有尝试过 - 我会试一试并回复您。
一个问题是，我真的不想影响子元素的正边距。但我会看看我能不能用这个做点什么。

【解决方案2】：

有一种 javascript 方法可以处理这个问题，但它肯定不如 @Mic 的 CSS 解决方案那么干净。我还没有完全测试过这个，你可能需要添加一些对各种填充/边距调整的支持，但如果 JS 解决方案是唯一的选择，它会让人开始。使用prototype.js（jquery 类似，但纯javascript 会非常……有弹性）：

function checkOverflow (child) {
  child = $(child);
  if (child.descendants().any()) {
    child.getElementsBySelector("> *").each(function(e) {
      checkOverflow(e);
    });
  }

  var parent = child.up();

  var child_left = child.cumulativeOffset()['left'], child_top = child.cumulativeOffset()['top'];
  var child_height = child.getDimensions()['height'], child_width = child.getDimensions()['width'];

  var parent_left = parent.cumulativeOffset()['left'], parent_top = parent.cumulativeOffset()['top'];
  var parent_height = parent.getDimensions()['height'], parent_width = parent.getDimensions()['width'];

  if (child_top < parent_top) {
    if (child_left < parent_left) {
      // adjust element style here
    } else if (child_left > parent_left + parent_width) {
      // adjust element style here
    }
  } else if (child_top > parent_top + parent_height) {
    if (child_left < parent_left) {
      // adjust element style here
    } else if (child_left > parent_left + parent_width) {
      // adjust element style here
    }
  }
}

不过，我的总体感觉是，只有在无法通过 CSS 明确完成时，才应该这样做。

【讨论】：

感谢 Adam - 有趣的方法。我宁愿使用 css，但我有一种感觉，我无法单独使用 css 来完成它，所以可能需要一些类似的东西。
哦，还有一个简短的说明，这是使用prototype.js。