Web application, one little layout feature
As an example illustrating the task, I can cite this topic: A miniature calculator application . The peculiarity that the coder must take into account is that the window with the application is usually not stretched to the full screen (for example, to deploy a calculator or softphone to the full screen?), But the window size can be changed by the user, and can be changed very arbitrarily, up to full screen.
So, a production task has arisen: it is necessary to place a fixed height header on the page, and fill the rest of the place with a container with the possibility of a scroll bar in case of a large amount of content in it. Those. not a page should scroll, but a div (a la ICQ, in the button cap, in the contact list container). It would seem that the problem is trivial, it is solved with a handler (for a diva, the height is 100% and somehow subtract the fixed height of the cap from it). But no, the hour of beating his forehead on the keyboard did not bring anything.
Already at home, a crazy idea came to the tired head - to try to stretch the div vertically with the help of top: 0, bottom: 0. And, you know, it worked! True, not everywhere - IE6 became obstinate, did not want to combine the bottom edge of the diva with the bottom edge of the page. I had to “hack” him.
Here's what I got (in the example, even two containers with different sized contents):
')
By the way, in order to add a basement fixed in height to this code, you need to assign the following style for it: {position: absolute; bottom: 0; width: 100%; height: 100px;} and take it into account in the .block style (change the bottom value to the value of the height of the added block, and subtract the same value into expression).
So, a production task has arisen: it is necessary to place a fixed height header on the page, and fill the rest of the place with a container with the possibility of a scroll bar in case of a large amount of content in it. Those. not a page should scroll, but a div (a la ICQ, in the button cap, in the contact list container). It would seem that the problem is trivial, it is solved with a handler (for a diva, the height is 100% and somehow subtract the fixed height of the cap from it). But no, the hour of beating his forehead on the keyboard did not bring anything.
Already at home, a crazy idea came to the tired head - to try to stretch the div vertically with the help of top: 0, bottom: 0. And, you know, it worked! True, not everywhere - IE6 became obstinate, did not want to combine the bottom edge of the diva with the bottom edge of the page. I had to “hack” him.
Here's what I got (in the example, even two containers with different sized contents):
')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>-</title>
<style type="text/css">
* {margin: 0; padding: 0;}
/* "", ( ). :) */
html, body {height: 100%;}
/* , expression (. 6 ) clientHeight, . */
.block {position: absolute; top: 100px; bottom: 0; overflow: auto;}
/* , . , top bottom (! , top bottom). top:100px - . 6, . (. ). overflow. */
* html .block {height: expression(document.body.clientHeight-100 + "px");}
/* CSS-, 6 . , clientHeight (100 .) */
</style>
</head>
<body>
<div style="height: 100px; background: yellow"> , 100 .</div>
<div class="block" style="width: 200px; background: green;">
. , ...
</div>
<div class="block" style="left: 200px; width: 300px; background: red;">
. , ...
</div>
</body>
</html>
By the way, in order to add a basement fixed in height to this code, you need to assign the following style for it: {position: absolute; bottom: 0; width: 100%; height: 100px;} and take it into account in the .block style (change the bottom value to the value of the height of the added block, and subtract the same value into expression).
- “Live” example (Already it does not work due to the reason for the lack of files on the hosting)
- Displayability in various browsers can be viewed on BrowserShots.org
Source: https://habr.com/ru/post/39949/
All Articles