Здравствуйте! Хочу сделать эмуляцию оконного интерфейса в html. т.е. должны быть Заголовок, Контент, по бокам "боковины окна", Подвал.
Контенет должен прокручиваться, так что бы Заголовок и Подвал всегда были на своих местах. т.о. общая прокрутка браузера не годится.
Я сверстал - ниже приведен код - но у моей верстки есть значительный минус - стрелочки у полос прокрутки прячутся под Заголовком и Подвалом.
Единственное решение которое я вижу, это определять размер рабочей области сайта подбирать и подставлять высоту блока #commonBlock для каждого из разрешений .... а без JS?
Код:<!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"> <head><title>Scroll in center</title> <style type="text/css"><!-- html {height: 100%;} body {min-width: 1000px; min-height: 100%; margin:0; padding:0; background:#fff;} #header { * * * /*стиль для фиолетового заголовка */ * *height:95px; * *width:100%; * *position: absolute; * *z-index:3; } #sideLeft { * * * /*стиль для левой красной полоски */ * *position:absolute; * *left:0; * *top:0; * *padding:0; * *width:8px; * *height:100%; * *z-index:1; } .sideRight { * */*стиль для правой красной полоски */ * *position:absolute; * *top:0; * *right:0; * *padding:0; * *width:8px; * *height:100%; * *z-index:1; } #commonBlock { * /*стиль для общего 100%-высотного блока с прокруткой */ * *width: 100%; * *height:100%; * *position:absolute; * *right:9px; * *top:0; * *padding:0; * *overflow: auto; } #textBlock { * */*стиль для позиционирования текста - что б вылезал из за заголовка и подвала */ * *padding:100px 12px 40px 21px;; } #footerCommonBlock { */*стиль для фиолетового подвала */ * *width: 100%; * *height: 37px; * *position: absolute; * *bottom:0; * *z-index:3; } //--></style> </head><body> <div id="commonBlock" style="background:#9cc;"> * *<div id="textBlock"> * * * begin text * * * content * * * * end text * *</div> </div> </body></html>
