Note: I don't believe this is officially supported by Salesforce as it leverages the sidebar injection hack. As such, it could break with future releases if Salesforce prevents this in future. That being said, it makes embedded Visualforce pages look much, much cleaner, and we've been using it in our org for a few months now.
I really hope Salesforce will address this with Standard functionality in the future, and I urge you to vote for this idea on the IdeaExchange.
Dynamicly sized visual force pages in Standard Layouts
That being said, the iNetIndustry: Inline VisualForce Expander app solves this exact issue, automatically resizing inline VisualForce components on standard page layouts. With one minor tweak, I was able to get it to work on Home Page components as well.
Be sure to read through the Installation Guide, as there are a couple things you will need to do, including adding a sidebar component, and updating a Custom Setting to point to the specific Visualforce Page Ids that you want to dynamically expand.
Here is a Screenshot before the App, see it getting cut off
Make sure you add a Custom Setting with the Visualforce Page Name & the Id. (The Id can be found by navigating to the Visualforce page from within the Salesforce UI, and noticing the URL. e.g., in my Sandbox the UnderConstruction Visualforce page is https://cs14.salesforce.com/066C0000000AvXu so the VF Id is 066C0000000AvXu)
The one additional setep to make this App work with Home Page components is edit the iFrame's Id to be the VF Page Id. Normally, the Salesforce rendering engine will automatically set this if the Visualforce page is rendered within a Standard Page Layout, but because it doesn't have that context, you will need to do this yourself.
Finally, you will see the after result, without any cut off.
Cookie seems to be right approach, here is what I could quickly draft and test in a HTML component.
<a onclick="setColor('red')" style="color:red;"> Give me Red ! </a>
<br/>
<a onclick="setColor('pink')" style="color:pink;"> Give me Pink ! </a>
<script>
var cookieName = 'colorSelection';
var cookieVal ;
var allCookies = document.cookie.split(';');
for ( var idx = 0; idx < allCookies.length; idx++ ) {
if (allCookies[idx].trim().indexOf(cookieName) == 0) {
cookieVal = allCookies[idx].trim().split('=')[1];
break;
}
}
if (cookieVal) {
alert('Your last selected color was : ' + cookieVal);
}
function setColor(valColor) {
document.cookie=cookieName + "=" + valColor;
alert('color is ' + valColor + ' now');
}
</script>
Above code sets a cookie via home page component, and reads it back on reload. One can change cookie value from red to pink or vice versa, via hyperlinks.
You don't need jquery as such for manipulating cookies via Javascript. You might want to add "expiries" attribute to cookie, in case your values are time bound.
Best Answer
As the section name indicates, that is a HTML component area, so it doesn't expect Visualforce code. That section won't render visualforce code you enter in there.