Set DIV size automatically from a position

[Andrew Poulos]

Is it possible to set a DIV at a fixed position and have its size to
automatically extend to the edge of the visible browser window?

If have this

<div style="position:absolute; left:100px; right:0px; top:100px;">
[content here]
</div>

and I tried a number of things including this

<div style="position:absolute; left:100px; right:0px; top:100px;
bottom:0px;">
[content here]
</div>

to no avail.

I need to set the DIV position to a pixel coordinate.

Andrew Poulos

[Jukka K. Korpela]

2013-02-05 1:20, Andrew Poulos wrote:

> Is it possible to set a DIV at a fixed position and have its size to
> automatically extend to the edge of the visible browser window?

Yes.

> If have this
>
> <div style="position:absolute; left:100px; right:0px; top:100px;">
> [content here]
> </div>

That does it, does it not? If not, then there is something else on the
page that breaks the idea. Please post a minimal demo case that actually
shows what the problem is, and identify the browser(s) tested.

> and I tried a number of things including this
>
> <div style="position:absolute; left:100px; right:0px; top:100px;
> bottom:0px;">
> [content here]
> </div>

That just adds bottom: 0px, which makes the element extend to the bottom
as well as the right edge. So what is the problem?

> I need to set the DIV position to a pixel coordinate.

That's what you are doing.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[dorayme]

In article <tNWdnYsX6Oaw343M...@westnet.com.au>,

Andrew Poulos <ap_...@hotmail.com> wrote:

> Is it possible to set a DIV at a fixed position and have its size to
> automatically extend to the edge of the visible browser window?
>
> If have this
>
> <div style="position:absolute; left:100px; right:0px; top:100px;">
> [content here]
> </div>

Add to it thus to see what you are doing better:

<div style="position:absolute; left:100px; right:0px; top:100px;

background-color: #cfc;">
[content here]
</div>

or

<div style="position:absolute; background-color: #cfc;">
[content here]
</div>

--
dorayme

[dorayme]

In article <dorayme-5E09DE...@news.albasani.net>,

sent mistakenly ...incomplete post, I will go on here:

The latter has nothing to stop the natural shrink-to-fit tendency of
the abs pos element. Make sure that whatever else you have on your
page is not triggering this tendency. Best to post a URL.

--
dorayme

[Andrew Poulos]

On 5/02/2013 10:27 AM, Jukka K. Korpela wrote:
> 2013-02-05 1:20, Andrew Poulos wrote:
>
>> Is it possible to set a DIV at a fixed position and have its size to
>> automatically extend to the edge of the visible browser window?
>
> Yes.
>
>> If have this
>>
>> <div style="position:absolute; left:100px; right:0px; top:100px;">
>> [content here]
>> </div>
>
> That does it, does it not? If not, then there is something else on the
> page that breaks the idea. Please post a minimal demo case that actually
> shows what the problem is, and identify the browser(s) tested.
>
>> and I tried a number of things including this
>>
>> <div style="position:absolute; left:100px; right:0px; top:100px;
>> bottom:0px;">
>> [content here]
>> </div>
>
> That just adds bottom: 0px, which makes the element extend to the bottom
> as well as the right edge. So what is the problem?

It turns out that the element in question is an IFRAME and not a DIV.
Sorry for misleading everyone.

So doing this

<iframe style="position:absolute; left:100px; right:0px; top:100px;">
<p>Not supported</p>
</iframe>

does not extend the IFRAME to the right hand side of the window. Should
I wrap the IFRAME in a DIV and set the size of the IFRAME to 100%?

Andrew Poulos

[dorayme]

In article <ZpqdnSySWtgc443M...@westnet.com.au>,

Andrew Poulos <ap_...@hotmail.com> wrote:

> So doing this
>
> <iframe style="position:absolute; left:100px; right:0px; top:100px;">
> <p>Not supported</p>
> </iframe>
>
> does not extend the IFRAME to the right hand side of the window. Should
> I wrap the IFRAME in a DIV and set the size of the IFRAME to 100%?

No, if BODY is not good enough as a container, neither will DIV be any
better for this.

On the iFrame itself, try right: 0; (or 10px so you can see the right
border of the frame) width: 90%; to get roughly the effect you want.

Do you really need absolute positioning?

--
dorayme

[Jukka K. Korpela]

2013-02-05 5:37, Andrew Poulos wrote:

> It turns out that the element in question is an IFRAME and not a DIV.

It seems that there is something odd with IFRAME styling

> So doing this
>
> <iframe style="position:absolute; left:100px; right:0px; top:100px;">
> <p>Not supported</p>
> </iframe>
>
> does not extend the IFRAME to the right hand side of the window.

That's odd indeed.

> Should
> I wrap the IFRAME in a DIV and set the size of the IFRAME to 100%?

That seems to be the trick. And you would need to remove the default
border, otherwise the page width will be a little over 100%. Example:

<style>
div.iframecontainer {

position:absolute; left:100px; right:0px; top:100px;
}

iframe {
width: 100%; height: 100%; border: 0;
}
</style>
<div class=iframecontainer><iframe src=test.html>
<p>Cool, a browser without iframe support!</p>
</iframe></div>

Note the lack of any whitespace between the last end tags. If there's a
line break between them, browsers may treat it as an empty line (?); you
can see the effect if you set a background color on the div.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[tlvp]

On Tue, 05 Feb 2013 14:37:29 +1100, Andrew Poulos wrote:

> It turns out that the element in question is an IFRAME and not a DIV.

And can you really count on your users not being as fanatical as I about
making sure their browsers refuse to touch iFrames with a 10-foot pole?

:-) . Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Andrew Poulos]

On 5/02/2013 7:20 PM, tlvp wrote:
> On Tue, 05 Feb 2013 14:37:29 +1100, Andrew Poulos wrote:
>
>> It turns out that the element in question is an IFRAME and not a DIV.
>
> And can you really count on your users not being as fanatical as I about
> making sure their browsers refuse to touch iFrames with a 10-foot pole?

Why, its part of HTML 4.01 and HTML5 specs? Its supported by Chrome,
Firefox, IE, Opera, and Safari... Its been around for a long time. And
if the site I'm working on is relatively small and no content is coming
cross-domain ie I will control all content.

Andrew Poulos

[tlvp]

On Tue, 05 Feb 2013 22:57:11 +1100, Andrew Poulos wrote:

> Why, its part of HTML 4.01 and HTML5 specs? Its supported by Chrome,
> Firefox, IE, Opera, and Safari... Its been around for a long time.

Quite so, on all counts. In fact, it's been around for so long that it was
the primary mechanism for downloading and then running the EXE parts to the
Romeo and Juliet virus (I watched it try its stuff back in the ASCII-only
days of doing email through MCI Mail over 300 baud modems attached to a
Dorio VT-220 dumb data terminal :-) ).

So iFrames? No thanks, not for me! (Google [ malware through iFrames ].)

[Andrew Poulos]

So IFRAMES shouldn't be used because they've been used to load malware
onto unprotected computers? Can't it be prevented by: installing the
latest updates to your OS; running anti-virus software; and, running
anti-malware software?

Andrew Poulos

[tlvp]

On Wed, 06 Feb 2013 20:15:57 +1100, Andrew Poulos wrote:

> So IFRAMES shouldn't be used because they've been used to load malware
> onto unprotected computers?

Not what I meant to convey: use them all you wish. But be aware that the
more paranoid of your site visitors may be leery of letting iFrames run.

> Can't it be prevented by: installing the
> latest updates to your OS; running anti-virus software; and, running
> anti-malware software?

Mostly, yes. But not entirely -- again: Google [ malware through iFrames ].

OT: Same for Java, as this from the NYT, as far back as April, illustrates:

> ... a new computer virus had infected half a million Macs — about half of them
> in the United States. The virus is infesting the computers in the most
> surreptitious way possible: users need not manually click on any malicious
> links or manually download any malware to get infected. The program simply
> downloads itself. ...

Not just for Macs, obviously :-) . More at:

<http://bits.blogs.nytimes.com/2012/04/06/widespread-computer-virus-indicates-mac-users-no-longer-safe/>.

Me? I abjure both iFrames and Java. Cheers, -- tlvp

[Gus Richter]

On 2/5/2013 12:55 AM, Jukka K. Korpela wrote:
>> Should
>> I wrap the IFRAME in a DIV and set the size of the IFRAME to 100%?
>
> That seems to be the trick. And you would need to remove the default
> border, otherwise the page width will be a little over 100%. Example:

Apply the border to the div instead (see the modified demo version below).

> <style>
> div.iframecontainer {
> position:absolute; left:100px; right:0px; top:100px;
> }
> iframe {
> width: 100%; height: 100%; border: 0;
> }
> </style>
> <div class=iframecontainer><iframe src=test.html>
> <p>Cool, a browser without iframe support!</p>
> </iframe></div>
>
> Note the lack of any whitespace between the last end tags. If there's a
> line break between them, browsers may treat it as an empty line (?); you
> can see the effect if you set a background color on the div.

I found no problem with this in the latest Fx, Chrome, Opera, IE8 and
Maxthon.

Apple has stopped updating Safari for Windows and therefore Safari has
been removed from the European browser selection list and has been
replaced with Maxthon on the top 5.

My modified version:

<style>
div.iframecontainer {
position:absolute; top:50px; left:100px; right:0px;
border:1px solid; background-color: tan; height:200px;

}
iframe {
width: 100%; height: 100%; border: 0;
}
</style>

<div class="iframecontainer"><iframe src="http://www.opera.com/">

<p>Cool, a browser without iframe support!</p>
</iframe>
</div>

--
Gus

[Thomas 'PointedEars' Lahn]

Andrew Poulos wrote:
> <iframe style="position:absolute; left:100px; right:0px; top:100px;">
> <p>Not supported</p>
> </iframe>
>
> does not extend the IFRAME to the right hand side of the window.
> Should I wrap the IFRAME in a DIV and set the size of the IFRAME to 100%?

Apparently you would have to as the “right” and “bottom” properties are
ignored on the “iframe” element, while the “left”, “top” and “width”, and
“height” properties are not.

div {
position: absolute;
top: 100px;
left: 100px;
right: 0;
}

div iframe {
width: 100%;
}

works for me somewhat, because depending on the viewport width there could
be scrollbars with “100%”. Likewise for “bottom” on the “div” element and
“height” on the “iframe” element.

Tested in Chromium “Version 24.0.1312.68 Built on Debian wheezy/sid, running
on Debian 7.0 (180326)”.


PointedEars
--
When all you know is jQuery, every problem looks $(olvable).