Is there anyway to have a textarea "autofit" height based on the content at page load?

How about http://www.jacklmoore.com/autosize/ Drop Autosize into any web page and it should Just Work. The source is short and well commented if you are curious to how it works.

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Source: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

You can use the auto resize plugin using the jQuery UI Autoresize

Here is the html,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
 src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

and here is the jquery,

$('textarea').autoResize();

see DEMO

Without plugins you could do something like

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

Resizing the textarea while it does have a scrollbar (so elem.clientHeight < elem.scrollHeight). You can do it quite easily even without JQuery, in plain javascript.

Didn't test the code, it's just the "concept".

EDIT: Dumb me, it's much easier, no loops...

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";