Pure HTML on the screen is a sequence of blocks spanning full width of the window (a.k.a. view) and stacked one by one forming “tape” of blocks. Tape as a geometrical surface has only one fixed dimension – width. Length of the tape is unknown at the moment of loading of HTML document. That is why there is no such thing as height=”100%” attribute/value in HTML specification. At all. By design. Nothing to calculate percentage from.
As a consequence: there is no vertical alignment of content in standard html (execept of table cell content but this is separate story) .CSS follows this path too. Yes, it defines such things as height:100% but be careful – sometimes height:XX% there means XX% from the width of the element it applied. In other cases trying to define something as { height:100%; padding:10px; } will give you effects not exactly you wanted. Have you ever seen in stylesheets something like height:99%? I bet – you did. Do you think author wanted element to be exactly 99%? I am pretty sure – no.
In many UI design cases you do need to say: I want this element (panel, block, etc.) to span the whole available height of the form/window/view. Take a look on the window of your favorite browser as an example. Can you define its window layout in HTML? … And hey! Don’t touch < table >s !!! They are designed for tabular data representation only (as they say). Anyway you cannot use such thing as < table height="100%" > in standard HTML. Well, you could of course give it a try but nobody will tell you what this height=100% means. 100% from what? Not defined, non-standard – not reliable to use.
So how the Sciter will help you here? Sciter extends standard CSS by few additional features:
- MultiLength (flex) length units are parts of CSS too here. In Sciter and HTMLayout. See %%units for more details.
In short %% (or *) units allow you to adjust HTML element dimensions in respect of size of application’s window and space occupied by other  elements. Flex units can help you to do vertical content alignment too.  Just say something { margin-top:30%%; margin-bottom:70%% } and this something will be positioned almost in the middle but close to the top of the container. - flow: [vertical | horizontal | h-flow | v-flow] CSS attribute. See flow attribute explanation. You can think about flow as a Java’s LayoutManager. flow attribute allows you to replace blocks in rows or columns without need of < table >s. Together with flex’es this gives you instrument for defining fluid and flexible layouts. (You can try of course to reproduce the same layout by using floats in standard HTML/CSS but, hey!, floats are considered harmful! )
- transition: [blend | slide | image | none]. That is animation in CSS. I know, I know … As users we would like to switch all that blinking things on the web pages off but as developers we want to produce something cool, right? This is it. Seriously speaking: animation, if used properly, can significantly increase aesthetical, ergonomic and usabilty quality of applications. All modern desktop applications have that in some form anyway.
- foreground-image and other correspondent foreground-*** attributes. These are a) useful and b) significantly reduce number of elements in the DOM you need for your UI – speed!. Think of how would you define button with icon inside in standard HTML/CSS…
- background-repeat: expand and stretch. In short expand allows you to define stretchable backgrounds by using just single image. See here for more details. Three elements on bottom of the screenshot demonstrate what you can achieve with stretchable background (and foreground too) images.
- behavior and prototype CSS attributes. In short: behavior and prototype attributes allows you to assign behavioral styles to arbitrary DOM elements. Example: if you will define following style declaration in the Sciter: #sometable td { behavior:edit; } then all cells in that table will behave as edit boxes. behavior attribute is used for defining “native” (built-in) behavior and prototype is used for assigning behavior implemented as a class in script.
