Fix table-cell height overflow-y (scroll) in a CSS 3 full page 100% height layout

 

If you are using display: table, display: table-row and display: table-cell in CSS to structure your HTML, then restricting the height of a content cell is difficult. If you want to have a content cell scroll correctly vertically, when the content of a cell exceeds the height of the table, like cell 2 in the following screen dump:

 

image

 

Then you can use a “relative” positioned div inside the table-cell and in the relative positioned div a absolute positioned div. This div should get the overflow-y property, like:

<div class="table" style="height: 100%;">
    <div class="row">
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">Cell 1</div>
        <div class="cell" style="border: 1px solid #000000; padding: 10px;">
            <!-- Use inner div's with position relative and absolute, to fix cell height,
                 making it overflow correctly. -->
            <div style="position:relative; height: 100%">
                <div style="overflow-y: scroll; position: absolute; top: 0; right:0; bottom: 0; left: 0;">

To see the code live: http://plnkr.co/edit/HWTsCsUpddHP3rZsMUtz?p=preview

Disable Application Cache during development on IIS.

In production we use Application Cache, to distribute a new version of a Single Page Application.

In development I immediately want to see my CSS, JavaScript and HTML code changes, without changing the “*.appcache” on every save. This is why I disable de Application Cache in development by “not serving” the “*.appcache” file:

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
      <!-- To disable appCache during development, comment line above and uncomment line below. -->
      <!--<mimeMap fileExtension=".wrongAppcache" mimeType="text/cache-manifest" />-->
    </staticContent>

How to clear all canvases found in a div with jQuery

 

If you want to clear all canvases found in a given div with jQuery, you can use the following code:

    // Clear all canvases found in the given div, including all child canvases and sub child canvases.
    $('#DivToFind canvas').each(function(idx, item) {
        var context = item.getContext("2d");
        context.clearRect(0, 0, item.width, item.height);
        context.beginPath();        
    });