Development (CSS/HTML) - Find/highlight/outline divs with zero height

Question

I'm a web developer. And when a container contains floated elements this means that they won't affect the height of their parent (the container). To fix this issue you need to either add overflow: auto, overflow: hidden or use a clearfix. Sometimes I forget to add this and as a result causing bugs that are found late in the development process causing a high amount of time spent on troubleshooting.

So, I'm trying to find something to integrate with my workflow that allows me to easier see if I have missed to clearfix any container who only have floated children (i.e find div element who has 0 height).

I am either looking for a JavaScript tool that can be used with either Grunt or Gulp and give indication that a container on a certain line will have 0 height. Or a Browser extension that can highlight or outline all divs with 0 height.

Answer 1

There are number of ways to do this. I am a big fan and heavy user of gulp, so normally I would recommend that, but in this case I think it's gonna end up being more trouble than it's worth:

I think your best here is to write a small function to execute on page load.

Something like the following:

    // 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
            }
       });
     }

Then execute the function with your desired selector on the domready event that your browser supports.

This will be easier than trying to modify your gulpfile or gruntfile and add code for this.