Member Avatar for ari$av3s

Hi, guys!

I started prototyping this site a little while ago. Some of the code may be a little bit ugly, but I'm cleaning it up as I go along.

I spent a very long time doing flash sites and I am trying to brush up on my css.

So, I have a blog inside of an iframe & I would like to create a div that extends to the length of the content. I need a little bit of guidance.

The blog content HTML:

<div id='outerdiv'>
<iframe src="" id='inneriframe' scrolling="no"></iframe>
</div>

The blog content CSS:

#outerdiv
{
width:1200px;
height:1800px;
overflow:hidden;
position:absolute;
margin:0 0 0 175px;
top: 505px; 
display: block;
float: left;
z-index:6;
border:none;

}


#inneriframe
{
position:absolute;
top:-215px;
left:-25px;
width:680px;
height:1800px;
border:none;
}

The site layout CSS:

body  {
overflow : scroll;
background-attachment : fixed;
background-color : #ffffff;
background-image : url("");
background-position : 0% 0%;
background-repeat : repeat;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
}
div.clearFloat {
clear : both;
font-size : 0;
height : 0;
line-height : 0;
}
li.clearFloat {
clear : both;
}
ul.symbolList {
display : inline;
float : left;
list-style-type : none;
margin : 0;
padding : 0;
}
.AbsWrap {
position : relative;
width : 100%;
}
.rowWrap {
width : 100%;
}
#main {
margin : 0 auto;
width : 1045px;
}
#pagebody_r2_c1 {
margin-left : 3px;
margin-top : 30px;
display : inline;
float : left;
height : 488px;
margin-bottom : 0;
width : 517px;
}
#pagebody_r2_c2 {
margin-left : 0;
margin-top : 84px;
display : inline;
float : left;
height : 434px;
margin-bottom : 0;
width : 520px;
}
#pagebody_r3_c1 {
margin-left : 72px;
margin-top : 0;
display : inline;
float : left;
height : 209px;
margin-bottom : 0;
width : 893px;
}
#pagebody_r4_c1 {
margin-left : 132px;
margin-top : 0;
display : inline;
float : left;
height : 222px;
margin-bottom : 0;
width : 765px;
}
#pagebody_r5_c1 {
margin-left : 126px;
margin-top : 0;
display : inline;
float : left;
height : 200px;
margin-bottom : 0;
width : 781px;
}
#pagebody_r6_c1 {
margin-left : 131px;
margin-top : 0;
display : inline;
float : left;
height : 158px;
margin-bottom : 0;
width : 775px;
}

Any advice/tips would be greatly appreciated. :)

Thanks!

  • 1 Contributor
  • 1 Reply
  • 197 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by ari$av3s

Dani AI

Generated

Good call, — applying the repeating tile to a container div is the simplest, most maintainable approach. The key points that make that solution robust are: stop using fixed absolute heights so the container can grow, apply the tile to the container (not the whole page) and let the iframe sit in normal flow, and ensure the iframe height is synchronized with its content. The remaining challenge is whether the iframe content is same‑origin or cross‑origin; that determines the resize technique.

A compact CSS pattern (container holds the tile; iframe flows) looks like this:

#tileWrap {
  width: 680px;
  background-image: url('/path/to/tile.png');
  background-repeat: repeat;      /* or repeat-y for a vertical tile */
  background-position: left top;
  overflow: hidden;
}
#tileWrap iframe {
  display: block;
  width: 100%;
  border: 0;
}

For same-origin pages the parent can read the iframe document and set height after load:

// parent (same-origin)
function setIframeHeight(iframe){
  var doc = iframe.contentDocument || iframe.contentWindow.document;
  iframe.style.height = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight) + 'px';
}
var ifr = document.getElementById('myIframe');
ifr.addEventListener('load', function(){ setIframeHeight(ifr); });

For cross-origin content the iframe must cooperate via postMessage. Inside the iframe send its height; the parent listens and applies it. Use origin checks and a ResizeObserver (or a fallback) so dynamic content is handled:

// inside iframe (child)
function sendHeight(){ parent.postMessage({type:'setHeight', height:document.documentElement.scrollHeight}, '*'); }
window.addEventListener('load', sendHeight);
new ResizeObserver(sendHeight).observe(document.documentElement);

// parent (listen)
window.addEventListener('message', function(e){
  var expectedOrigin = 'REPLACE_WITH_IFRAME_ORIGIN';
  if(e.origin !== expectedOrigin) return;
  if(e.data && e.data.type === 'setHeight') document.getElementById('myIframe').style.height = e.data.height + 'px';
});

Notes and cautions: always validate message origins, avoid using deprecated attributes like scrolling, and prefer a small repeating tile for performance. If the iframe page cannot be modified and is cross‑origin, automatic resizing isn’t possible without cooperation — in that case accept a fixed width/height and allow the inner page to scroll.

Member Avatar for ari$av3s

I ultimately cleaned the code up and found a faaar more elegant solution to what I was trying to accomplish by adding a repeating background to a div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.