Soy un desarrollador web. Y cuando un contenedor contiene elementos flotantes, esto significa que no afectarán la altura de su padre (el contenedor). Para solucionar este problema, debe agregar desbordamiento: automático, desbordamiento: oculto o usar una solución clara. A veces me olvido de agregar esto y, como resultado, se producen errores que se encuentran tarde en el proceso de desarrollo, lo que provoca una gran cantidad de tiempo dedicado a la resolución de problemas.
Por lo tanto, estoy tratando de encontrar algo para integrar con mi flujo de trabajo que me permita ver más fácilmente si he fallado en borrar cualquier contenedor que solo tenga elementos secundarios flotantes (es decir, encontrar un elemento div que tenga una altura de 0).
Estoy buscando una herramienta de JavaScript que se pueda usar con Grunt o Gulp y dé una indicación de que un contenedor en una determinada línea tendrá 0 altura. O una extensión del navegador que puede resaltar o delinear todos los divs con altura 0.
Hay varias maneras de hacer esto. Soy un gran admirador y un gran usuario de gulp, por lo que normalmente lo recomendaría, pero en este caso creo que terminará siendo más problemático de lo que vale:
Creo que lo mejor aquí es escribir una pequeña función para ejecutar en la carga de la página.
Algo como lo siguiente:
// 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
}
});
}
Luego ejecute la función con el selector que desee en el domreadyevento que admita su navegador.
Esto será más fácil que tratar de modificar su gulpfileo gruntfiley agregar código para esto.