: Embedding a Disqus forum on my website: showing scrollable area instead of expanding the height I hope I put this question as it should, I am not an expert in html/css/javascript, so forgive

@Jamie184

I kind of solved my own problem. The problem is that the autoHeight JQuery calculates the iframe but cannot look at other domains. "Cross-domain autoHeight js" brings enough results in Google, but not many easy answers.

I now solved it (sort of) by adding a div between the part:

<div style="min-height:800px !important; overflow:auto !important; height:100% !important; width:auto !important; margin:5px !important; font-size:inherit !important">


Now it renders well, does not autoexpand, but that is not a problem (it shows a scrollbar when the page is becoming longer than 800px.

Vote Up Vote Down

@Murray432

First - congratulations on your son, I have my first 5-month-old myself and it's a wonderful (but busy and tired) time of my life.

The issue with what you've got there is that you site is using <frame>, which is quite inflexible, and frankly outdated - even though you've actually done a very good job of getting them to look good!

Your main <frame> has a fixed height of 800px, which is why it's not expanding, but I don't think I've ever seen a frames site auto-expand the way you're intending.

There are two solutions to your situation, both involve dumping the <frame> option:


Use <table> based layout. CSS fanatics and strict XHTML people will have just had a heart attack with what I just said, but frankly it's the quickest and easiest way to get the layout that you want, and I'm guessing that you won't be doing a huge amount of traffic (friends and family only?) so nobody is going to mind, or even know.

A table with two columns should suffice - the first row will have two columns (left and right), and the bottom row will have a colspan=2 to make the footer row. Throw in a <valign=top> and that will ensure that the content keeps its current look and feel.
A <div> based layout. This is what the CSS and XHTML people will prefer to you use, and the layout will look the same as both a <table> and <frames> based layout but the fundamental way it's been designed is quite different. You'll need to use <div> tag and the float CSS property to get it to work. The people over at doctype.com should be able to help you with that.


Now, both of these solutions involve re-embedding your header and your footer onto every page. On a small site like this, I wouldn't be too concerned but if you start growing it to > 3 pages then it could become a nightmare to maintain. This is where some server-side coding comes into play.

What you would need is really very, very, very simple though, so don't go freaking out. If you were doing this in say, PHP, all you would need to do is say:

<?php include('navigation.html') ?>


Wherever you want the navigation to appear, have a file called navigation.html and it will then copy that file wherever that code is placed. So you place that code where you want the nav to appear in your pages, and hey presto :)

I hope that's given you some food for thought, let us know if you have any other queries.

P.S. I love your little artwork on the page, it brought a swell to my heart. Ahh the joys of parenthood

Vote Up Vote Down