- From: Bruno Melloni <Bruno.Melloni@akuratus.com>
- Date: Fri, 09 Sep 2005 14:25:36 -0500
- To: <kris@meridian-ds.com>
- Cc: <www-style@w3.org>
- Message-Id: <s3219b74.039@mail.akuratus.com>
Close.
A simplified form of what I am saying would be that page with a
scrollbar for the sidebar (overflow: auto), and a separate a scrollbar
for the "main content". Since those two things would handle all the
scrolling, the browser itself would no longer scroll.
A more complete behavior would be where the main content had its own
internal layout and some element in it had a scrolling DIV that occupied
all or a percentage of the free panel space.
The sample code I originally included is very similar to your page, and
works as desired if you run it in IE. For convenience I just added it
here as an attachment instead of inline.
The primary reason for this type of behavior is to give a web page the
"look and feel" of a normal windows or Java Swing application (when used
in conjunction with J2EE, Struts, Tiles, a database, and a few other
tools).
Bruno
Bruno Melloni
Director of Software Architecture
Akuratus Corporation
1333 N. Stemmons Fwy, Suite 110
Dallas, Texas 75207
Phone: 469.227.0920
Fax: 469.227.0967
bruno.melloni@akuratus.com
www.akuratus.com
>>> Kris Vanderwater <kris@meridian-ds.com> 09/09 2:03 PM >>>
So Bruno, kinda like this?
http://www.456bereastreet.com/lab/cssframes/
except with the navbar not scrolling either? and taking up the full
size
horizontally as well?
Cause if you check the css code on that page, you should be able to set
such a thing up pretty easily.
Kris
Bruno Melloni wrote:
> Yes, this is exactly it.
>
> As to the "NEVER" you are somewhat right, there are some occasions
> where it might exceed the size. We design our pages to be fully
> user-friendly at 800x600 monitor resolution. We also allow for
> flexibility so that the page retains their "basic look and feel" if
the
> user shrinks the broswer below that size. The internal scrollbars
on
> the DIV will normally handle the shrinking.
>
> But of course... as you approach zero size something will eventually
> fail, since the header, footer and menu do have a minimum size. But
> typically you would not loose the footer until you shrunk so far
that
> the space between header and footer went to zero (or close to it).
>
> Bruno Melloni
> Director of Software Architecture
> Akuratus Corporation
> 1333 N. Stemmons Fwy, Suite 110
> Dallas, Texas 75207
> Phone: 469.227.0920
> Fax: 469.227.0967
> bruno.melloni@akuratus.com
> www.akuratus.com
>
>
>>>>Kris Vanderwater <kris@meridian-ds.com> 09/09 11:52 AM >>>
>
>
> Bruno,
>
> Let's look at this again. 100% of the content of the page MUST be
> visible at all times yes?
>
> The footer must ALWAYS show, but can't use frames.
>
> the header and navbar should show also.
>
> The content NEVER exceeds the remaining space? And when it's too
small
>
> MUST take up the remaining space?
>
> I can't image it NEVER taking more space then you have, but we can
> address that later.
>
> Is this right?
>
> Kris
>
> Bruno Melloni wrote:
>
>>Hello, I need help in finding a CSS standard-compliant solution.
>
> Desperately.
>
>>We have a web application that *>must<-- be made to fit in the
>
> visible portion of the browser window (without browser scrolling)
and
> without frames. There are portions (header, left menu, footer) that
are
> fixed sized and are allowed to "collapse" to minimum size. But
there
> are portions (the main body and often pieces of it) that need to get
> 100% of the remaining visible space. The footer must always be
> visible.
>
>>As typical J2EE developers that have used CSS for years, with most
of
>
> our knowledge coming from simple online tutorials, and online
> references, but having never really studied CSS from front to back
we
> used the following "intuitive" approach:
>
>>1) We used nested tables for the layout with CSS' "height: 100%" for
>
> the "chain" of nested items that needed to get 100%.
>
>>2) We used DIVs with "height:100%; overflow: auto" to make sure
that
>
> we used all of the space and no more than that, in the situations
where
> we needed an internal scrollbar.
>
>>The code worked in IE (we later discovered that it was because we
>
> were running in quirks mode) but not in Firefox/Mozilla or even in IE
in
> standards-compliant mode. In standard-compliant mode the
application
> will properly expand to use all the space, but will not limit itself
to
> the size of the window (as if the DIV overflow wasn't there).
>
>>We have been looking for a standards-compliant solution for a year.
>
> We received many suggestions, but none worked. We arestuck with a
> non-Windows application that will only run as it was intended in a
> Windows browser!!!
>
>>Is there a way to make our approach work?
>>
>>If not, is there an alternative approach to achieve the exact
>
> look-and-feel behavior that we are currently getting with IE?
>
>>I hope someone can help.
>>
>>Bruno
>>
>>*-----------------------------------
>>The following is a sample HTML/CSS that can be used to see the
>
> desired behavior (in IE) and the unwanted behavior (in
> standards-compliant mode, or Mozilla-based browser in default quirk
> mode). The difference is in the bottom of the browser window, and
the
> (internal) scrollbar in the right.
>
>><html>
>><HEAD>
>><STYLE type="text/css">
>>BODY {
>> margin: 0;
>> padding: 0;
>> color: #575529;
>> background-color: #CDCD9C;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 9pt;
>> text-decoration: none;
>>}
>>A {
>> /*color: #575529;*/
>> color: #8C4600;
>> text-decoration: none;
>>}
>>A:hover {
>> color: #562429;
>> text-decoration: none;
>>}
>>DIV {
>> width: 100%;
>> height: 100%;
>> overflow: auto;
>> /*
>> position: absolute;
>> max-width: 100%
>> min-height:100%;
>> max-height: 100%
>> top: 0;
>> bottom: 0;
>> */
>>}
>>UL.none {
>> list-style-type: none;
>>}
>>.maxw {
>> width: 100%;
>> max-width: 100%
>>}
>>.maxh {
>> height: 100%;
>> max-height: 100%;
>>}
>>.maxwh {
>> width: 100%;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.maxwh_noborder{
>> border: 0;
>> width: 100%;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.maxw_noborder{
>> border: 0;
>> width: 100%;
>> max-width: 100%
>>}
>>.maxh_noborder{
>> border: 0;
>> height: 100%;
>> max-width: 100%
>> max-height: 100%
>>}
>>.banner_bg {
>> background-color: #575529;
>>}
>>.menu_top {
>> height: 17;
>> margin-left: 15;
>> color: #575529;
>> background-color: #B6AA5A;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 8pt;
>> text-decoration: none;
>>}
>>.menu_left {
>> color: #575529;
>> background-color: #CDD0B9;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 9pt;
>> text-decoration: none;
>>}
>>.pg_title {
>> font-size: 12pt;
>> font-weight: bold;
>>}
>>.footer_separator {
>> width: 100%;
>> height: 17px;
>> background-color: #B6AA5A;
>>}
>>.footer_text {
>> color: #575529;
>> font-family: Century Gothic, Copperplate Gothic Light, Arial,
>
> Helvetica, sans-serif;
>
>> font-size: 7.5pt;
>> text-decoration: none;
>> margin-top: 2;
>> margin-bottom: 0;
>> text-align: center;
>>}
>></STYLE>
>></HEAD>
>>
>><BODY topmargin="0" leftmargin="0" class="maxwh">
>><TABLE cellpadding="0" cellspacing="0" class="maxwh_noborder">
>> <TBODY>
>> <TR>
>> <TD class="banner_bg" class="maxw">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR BGCOLOR="#464420"><TD class=maxw> </TD></TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD class="menu_top" width="100%">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR class="menu_top">
>> <TD width="170" nowrap>
>> <A href="http://localhost:8080/tc/TcInit.do"
>
> class="menu_top">
>
>> <B>Teacher Info Center</B>
>> </A>
>> </TD>
>> <TD class="maxw">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR class="menu_top">
>> <TD nowrap class="menu_top">Teacher Best</TD>
>> <TD class="maxw"> </TD>
>> <TD nowrap align="right" style="font-weight:
>
> bold;">
>
>> <A href="http://localhost:8080/tc/"
>
> class="menu_top">Portal</A>
>
>>
>> <A
>
> href="http://localhost:8080/tc/TcLogoffInit.do"
> class="menu_top">Logoff</A>
>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <!-- *************** BOTTOM 2 PANELS START HERE **************
>
> -->
>
>> <TR>
>> <TD class="maxwh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder">
>
>> <TR>
>> <!-- Left panel starts here (irrelevant) -->
>> <TD width="170" class="maxh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxh_noborder" width="170">
>
>> <TR><TD height="10"
>
> class="menu_left"> </TD></TR>
>
>> <TR>
>> <TD valign="top" class="menu_left" style="height:
>
> 100%; max-height: 100%;" width="170">
>
>> Menu here
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> <!-- *********** BOTTOM-RIGHT PANEL STARTS HERE
>
> ************* -->
>
>> <TD valign="top" class="maxwh">
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder" >
>
>> <TR>
>> <TD width="15"> </TD> <!-- left spacing -->
>> <TD class="maxwh"> <!-- MAIN BODY -->
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxwh_noborder">
>
>> <TR><TD> </TD></TR>
>> <TR>
>> <TD>
>> <TABLE cellpadding="0" cellspacing="0"
>
> class="maxw_noborder">
>
>> <TR><TD class="pg_title">Title
>
> Here</TD></TR>
>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD height="10"></TD>
>> </TR>
>> <form name="teacherViewForm" method="POST"
>
> action="/tc/TeacherViewPost.do">
>
>> <TR>
>> <TD class="maxwh">
>> <DIV>
>> <TABLE cellpadding="0" cellspacing="4"
>
> class="pgmaxwh">
>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> <TR><TD>x</TD></TR>
>> </TABLE>
>> </DIV>
>> </TD>
>> </TR>
>> </FORM>
>> </TABLE>
>> </TD>
>> <TD width="15"> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> </TABLE>
>> </TD>
>> </TR>
>> <TR>
>> <TD valign="top" class="footer_separator"> </TD>
>> </TR>
>> <TR>
>> <TD class="footer_text">© 2003-2005
>> <A href="http://www.akuratus.com"
>
> class="footer_text">Akuratus</A>
>
>> |
>> <A href="#" class="footer_text">Privacy</A>
>> </TD>
>> </TR>
>> </TBODY>
>></TABLE>
>></BODY>
>></html>
>>
>>
>>Bruno Melloni
>>Director of Software Architecture
>>Akuratus Corporation
>>1333 N. Stemmons Fwy, Suite 110
>>Dallas, Texas 75207
>>Phone: 469.227.0920
>>Fax: 469.227.0967
>>bruno.melloni@akuratus.com
>>www.akuratus.com
>>
>
>
>
Attachments
- text/html attachment: div.html
Received on Friday, 9 September 2005 19:26:14 UTC