Ich bin Webentwickler. Und wenn ein Container schwebende Elemente enthält, bedeutet dies, dass sie die Höhe ihres Elternelements (des Containers) nicht beeinflussen. Um dieses Problem zu beheben, müssen Sie entweder overflow: auto, overflow: hidden hinzufügen oder einen Clearfix verwenden. Manchmal vergesse ich, dies hinzuzufügen, was zu Fehlern führt, die erst spät im Entwicklungsprozess gefunden werden und viel Zeit für die Fehlerbehebung aufwenden.
Also versuche ich, etwas zu finden, das ich in meinen Workflow integrieren kann, das es mir ermöglicht, leichter zu sehen, ob ich es versäumt habe, Container zu löschen, die nur schwebende Kinder haben (dh div-Element finden, das eine Höhe von 0 hat).
Ich suche entweder nach einem JavaScript-Tool, das entweder mit Grunt oder Gulp verwendet werden kann und anzeigt, dass ein Container in einer bestimmten Zeile eine Höhe von 0 hat. Oder eine Browser-Erweiterung, die alle Divs mit einer Höhe von 0 hervorheben oder umreißen kann.
Es gibt mehrere Möglichkeiten, dies zu tun. Ich bin ein großer Fan und starker Benutzer von gulp, also würde ich das normalerweise empfehlen, aber in diesem Fall denke ich, dass es am Ende mehr Ärger geben wird, als es wert ist:
Ich denke, Sie schreiben hier am besten eine kleine Funktion, die beim Laden der Seite ausgeführt wird.
Etwas wie das Folgende:
// pass it a selector like `div` or
// `classname` or `*`
// the `el` parameter can be ignored
// unless you want to limit the search scope
function testElemHeight(selector,el){
if(!el){
el=document;
}
var height;
var $elems=el.querySelectorAll(selector);
$elems=Array.prototype.slice.call($elems);
$elems.forEach(function(elem,index){
height=getComputedStyle(elem).height;
if(height===0){
// put your code in here
// style it, or log it to the console
// you have the `index` to use for reference
}
});
}
Führen Sie dann die Funktion mit Ihrem gewünschten Selektor aus domready, sofern Ihr Browser dies unterstützt.
Dies ist einfacher, als zu versuchen, Ihr gulpfileoder zu ändern gruntfileund Code dafür hinzuzufügen.