Re: width and height

Lachlan Hunt wrote:
> Rastislav Graus wrote:
> 
>> Layout fills 100% of width and 100% of height his content-box:
>> +------------------------------------------------+
>> | width: 100%; height: 100px;                    |
>> +----------------+-------------------------------+
>> | width: 300px;  | width: rest;                  |
>> | height: rest;  | height: rest;                 |
>> |                |                               |
>> |                |                               |
>> |                |           CONTENT             |
>> |                |                               |
>> |                |                               |
>> |                |                               |
>> +----------------+-------------------------------+
>>
>> I sugesst to define new value "rest" for atributes width and height 
>> with the meaning, that the box of element fills all the remaining 
>> space of the content-box.
> 
> 
>   This is not necessary because other CSS properties can give a similar 
> result.  For example,
> 
> #content {
>     position: absolute;
>     top: 100px; left: 300px;
>     bottom: 0; right: 0;
>     height: auto; width: auto;
>     overflow: scroll;
> }
> 
>   Although, just like most standards compliant CSS, this doesn't work 
> properly in Internet Explorer because IE can't handle setting 'top' and 
> 'bottom' together, or 'left' and 'right' together.  There may be many 
> other methods to acheive a similar result; look up some CSS tutorials, 
> many of which also cover hacks for the non-standard browsers.
> 

You don't right.

1. Your solution can be only with difficulty nested and maintained, 
because nested elements have then their position as sum of dimensions of 
  all ancessors.

2. Your solution don't work, when header has height auto.

3. Assume we now nested structure of above described type with depth 3, 
where first (outer) header has height in percentage, second header has 
height in pixels. There is no posibility to give basolute position of 
the third-level-elements, because there is no way to put expressions in 
a value.

Very probably I can write more layouts, that couldn't be build in CSS.

Posible, we can discuss my definition.
I use mostly table-based layouts, they are for applications more 
suitable and maintainable as DIV-based layouts. For these tayout tables 
I'll welcome a posibility to say, that one column/row fill the rest of 
the width/height of table independently on how is the witdt/height of 
other columns/rows specified. This column/row have not to be the last 
one. More abstract, can be defined the proportion of the rest, that the 
   element uses. Minimaly for tables, would be this posibility very usefull.


Example:
I develop aplication. I prepare main layout template:

<HTML>
   <HEAD>
     ...
   </HEAD>
   <BODY style="margin: 0px; padding: 0px; width: 100%; height: 100%;">
     <TABLE style="height: 100%; width: 100%;" cellspacing="0" 
cellpadding="0" border="0">
       <TBODY height: 100%;">
         <!-- header -->
         <TR style="height: auto;">
           <TD>
             ... <!-- Common header definition -->
             {$pageHeader} <!-- Here will be included page specific 
header -->
           </TD>
         </TR>
         <!-- page content -->
         <TR style="height: rest;">
           <TD>
             {$pageContent} <!-- Here will be included page specific 
content -->
           </TD>
         </TR<
         <!-- footer -->
         <TR style="height: auto;">
           <TD>
             {$pageFooter} <!-- Here will be included page specific 
footer -->
             ... <!-- Common footer definition -->
           </TD>
         </TR>
       </TBODY>
     </TABLE>
   </BODY>
</HTML>

Now can page developer focus only on page content layout and can again 
use layout-table with height and width set to 100%.

	Rasto.

Received on Friday, 19 March 2004 03:17:29 UTC