473,698 Members | 2,196 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Variable length scrolling <div> or <iframe>?

I have had great success with using <iframe> with overflow-y set to auto. I
can get a similar look with the <iframe> tag.

BUT... In all cases I need to have fixed heights. Is there a way to put
either tag inside an HTML <TD> and have the same kind of scrolling effect.

This would allow me to fill the screen and have the size of the scrolling
box change on resize.

Thanks in advance.

Jim
Nov 22 '05 #1
44 3698
<table height="100%" width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<div style="width: 100%; height: 100%; overflow: auto; border:
1px solid red">
A div with text in it that will stat at 100% of the holding block element
size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block element
size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block element
size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block element
size and also allow scrolling for off screen content. </div>
</td>
</tr>
</table>

Border added for effect.

Chris.

"Jim M" <an********@dis cussions.micros oft.com> wrote in message
news:OH******** ******@TK2MSFTN GP09.phx.gbl...
I have had great success with using <iframe> with overflow-y set to auto. I
can get a similar look with the <iframe> tag.

BUT... In all cases I need to have fixed heights. Is there a way to put
either tag inside an HTML <TD> and have the same kind of scrolling effect.

This would allow me to fill the screen and have the size of the scrolling
box change on resize.

Thanks in advance.

Jim

Nov 22 '05 #2
"Jim M" <an********@dis cussions.micros oft.com> schrieb
I have had great success with using <iframe> with overflow-y set to
auto. I can get a similar look with the <iframe> tag.

BUT... In all cases I need to have fixed heights. Is there a way to
put either tag inside an HTML <TD> and have the same kind of
scrolling effect.

This would allow me to fill the screen and have the size of the
scrolling box change on resize.


I don't know what you mean. I think it is not a VB.NET language related
question.
--
Armin

http://www.plig.net/nnq/nquote.html
http://www.netmeister.org/news/learn2quote.html

Nov 22 '05 #3
"Chris Barber" <ch***@blue-canoe.co.uk.NOS PAM> wrote in
news:#X******** ******@TK2MSFTN GP12.phx.gbl:
<table height="100%" width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<div style="width: 100%; height: 100%; overflow: auto;
border:
1px solid red">
A div with text in it that will stat at 100% of the holding block
element size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block
element size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block
element size and also allow scrolling for off screen content.
A div with text in it that will stat at 100% of the holding block
element size and also allow scrolling for off screen content.
</div>
</td>
</tr>
</table>

Border added for effect.


This only works in IE, but not in Mozilla browsers. (in mozilla the
scrollbar never appears, because the element with height:100% seems to
grow automatically.)

Anyone knows how to do this in a uniform way?

Allie

Nov 22 '05 #4
Brilliant :(

I am beginning to despair with HTML and browser specific implementations .

Chris.

"Allard" <sp**@atarde.co m.br> wrote in message
news:Xn******** *************** ********@207.46 .248.16...
"Chris Barber" <ch***@blue-canoe.co.uk.NOS PAM> wrote in
news:#X******** ******@TK2MSFTN GP12.phx.gbl:

<snipped/>

This only works in IE, but not in Mozilla browsers. (in mozilla the
scrollbar never appears, because the element with height:100% seems to
grow automatically.)

Anyone knows how to do this in a uniform way?

Allie
Nov 22 '05 #5
"Chris Barber" wrote:

Brilliant :(

I am beginning to despair with HTML and browser specific
implementations .


First of all, it's a style issue, not an HTML one**. And this seems worthy
of mention:

"CSS1 core: UAs may ignore the 'height' property (i.e.,
treat it as 'auto') if the element is not a replaced
element."
http://www.w3.org/TR/CSS1#height

Since a DIV is not a replaced element, I don't see how you can reasonably
expect uniformity.

And that's just as well. Consider what the W3C says about style sheets:

"By attaching style sheets to structured documents on the
Web (e.g. HTML), authors and readers can influence the
presentation of documents without sacrificing device-
independence or adding new HTML tags."
http://www.w3.org/Style/

To me, the key word in that passage is INFLUENCE. I wouldn't get too worked
up about standards-compliant discrepancies between implementations . This is
a technology that should be *embraced* for its flexibility, not cursed.
**Even if you want to consider the HTML HEIGHT attribute on your table, you
have a problem. For one thing, the TABLE element has none. And for cells,
it's deprecated:
http://www.w3.org/TR/1998/REC-html40...tml#edef-TABLE
http://www.w3.org/TR/1998/REC-html40...adef-height-TH

--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.

Nov 22 '05 #6
"Dave Anderson" <GT**********@s pammotel.com> wrote in
news:u5******** *****@TK2MSFTNG P11.phx.gbl:
"Chris Barber" wrote:

Brilliant :(

I am beginning to despair with HTML and browser specific
implementations .
First of all, it's a style issue, not an HTML one**. And this seems
worthy of mention:

"CSS1 core: UAs may ignore the 'height' property (i.e.,
treat it as 'auto') if the element is not a replaced
element."
http://www.w3.org/TR/CSS1#height

Since a DIV is not a replaced element, I don't see how you can
reasonably expect uniformity.

And that's just as well. Consider what the W3C says about style
sheets:

"By attaching style sheets to structured documents on the
Web (e.g. HTML), authors and readers can influence the
presentation of documents without sacrificing device-
independence or adding new HTML tags."
http://www.w3.org/Style/

To me, the key word in that passage is INFLUENCE. I wouldn't get too
worked up about standards-compliant discrepancies between
implementations . This is a technology that should be *embraced* for
its flexibility, not cursed.
**Even if you want to consider the HTML HEIGHT attribute on your
table, you have a problem. For one thing, the TABLE element has none.
And for cells, it's deprecated:
http://www.w3.org/TR/1998/REC-html40...les.html#edef-

T ABLE
http://www.w3.org/TR/1998/REC-html40...les.html#adef- h eight-TH


That's all great, but how to do what we want then?

Nov 22 '05 #7
"Allard" wrote:

That's all great, but how to do what we want then?


By "do what we want", do you mean "force the browser to display exactly as
we desire"? If so, abandon that notion. You cannot reasonably expect the UA
to even support styles, as some people turn them off (for accessibility or
other reasons). Ditto for scripting.

Consider the MSDN JScript Language Reference:
http://msdn.microsoft.com/library/en...ereference.asp

When viewed in IE, the tree can be navigated without page reloads. When
viewed in Mozilla, the tree navigation, while still possible, requires that
the whole frameset reload. In Opera, there isn't even a frameset -- you see
only the content pages, but no tree.

And although site look and navigation is different for each browser, the
core purpose of the JScript reference is still served. Isn't that the
important thing?
--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.
Nov 22 '05 #8
"Dave Anderson" <GT**********@s pammotel.com> wrote in
news:#T******** ******@TK2MSFTN GP09.phx.gbl:
"Allard" wrote:

That's all great, but how to do what we want then?
By "do what we want", do you mean "force the browser to display
exactly as we desire"? If so, abandon that notion. You cannot
reasonably expect the UA to even support styles, as some people turn
them off (for accessibility or other reasons). Ditto for scripting.

Consider the MSDN JScript Language Reference:
http://msdn.microsoft.com/library/en-

us/script56/html/js56jslrfjscrip tl anguagereferenc e.asp

When viewed in IE, the tree can be navigated without page reloads.
When viewed in Mozilla, the tree navigation, while still possible,
requires that the whole frameset reload. In Opera, there isn't even a
frameset -- you see only the content pages, but no tree.

And although site look and navigation is different for each browser,
the core purpose of the JScript reference is still served. Isn't that
the important thing?


Correct, that is a nice example of browser specific implementations . For
example, in Mozilla the handling (and code) is different than for a IE
browser. I am sure they spent a lot of effort to make this in a uniform
way.

But the problem here is that we want to display something in the browser
that does not seem to be possible: if you have a table with two rows,
the first row is of fixed height, the second row should fill up the rest
of the screen. The content displayed in the second row should
automatically show scrollbars to be able to display all. The first row
should never scroll off screen. This in contrast of a big part of the
internet, where navigation buttons are scrolled off screen, which is
terribly ugly and user unfriendly. You must first scroll to navigate to
another page!?!?

Using the same approach as the example you gave, we could make a
different implementation for Mozilla browsers (using a frameset or so),
but of course this is not very easy to maintain.

Instead, how to display something like this on both browsers using HTML
and CSS?

The funny thing is that although IE might be inconsistent with the
specifications, it looks like it's the only browser that is capable of
showing user interfaces like the example earlier in this thread.

Appreciate your help,
Allie
Nov 22 '05 #9
"Allard" wrote:

Using the same approach as the example you gave, we could
make a different implementation for Mozilla browsers (using
a frameset or so), but of course this is not very easy to
maintain.
I intentionally chose an example that would highlight this point. I rigidly
oppose browser detection and the associated parallel development. But
choosing to write one version is necessarily a compromise. If I can't make
the application look and feel *exactly* the way I want to, then so be it.
Content is king, not design.

Instead, how to display something like this on both browsers
using HTML and CSS?
If you are so bound to the "full-window" model that you cannot budge, you
can always accomplish it with frames:

<FRAMESET ROWS="(value of choice),*">

The funny thing is that although IE might be inconsistent with
the specifications, it looks like it's the only browser that
is capable of showing user interfaces like the example earlier
in this thread.


It's the only browser you TESTED that does what you want within your a
priori established boundaries (no frames, for example).

--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use
of this email address implies consent to these terms. Please do not contact
me directly or ask me to contact you directly for assistance. If your
question is worth asking, it's worth posting.
Nov 22 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

44
919
by: Jim M | last post by:
I have had great success with using <iframe> with overflow-y set to auto. I can get a similar look with the <iframe> tag. BUT... In all cases I need to have fixed heights. Is there a way to put either tag inside an HTML <TD> and have the same kind of scrolling effect. This would allow me to fill the screen and have the size of the scrolling box change on resize. Thanks in advance.
0
8674
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9157
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9027
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8861
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7725
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6518
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4369
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4619
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2001
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.