CSS: Подавление отрицательных полей дочерних элементов

Question

У меня есть родительский элемент (например, div), который окружает некоторый динамический контент. Я хотел бы, чтобы родительский div полностью содержал дочерние элементы в максимально возможной степени.

Одна из проблем - это дочерние элементы с отрицательными параметрами поля, которые приводят к тому, что дочерний элемент отображается вне родительского элемента (а также приводит к тому, что родительский элемент не имеет желаемого размера).

Так

1. Есть ли CSS трюк, который может быть применен к родителю, чтобы подавить отрицательные поля в дочерних элементах (например, без необходимости изменять стили на ребенке).

2. Если это не так, есть ли способ обнаружить через javascript, имеет ли конкретный элемент переполненный контент? (? И в каком направлении и в какой степени содержание переполнена)

Answer 1

ли вы пытаетесь поставить класс родителя как:

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

Чтобы иметь родителя с нужной высоты, вам нужно установить некоторые CSS тоже:

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

Answer 2

Существует Javascript метод обработки, но это, конечно, не так чисто, как @ решение 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.