Прокрутка при 100% ширине блока, Эмуляция оконного интерфеса @ DeForum.ru

0 Сообщения: 5 Зарегистрирован: 31.05.07

Здравствуйте! Хочу сделать эмуляцию оконного интерфейса в html. т.е. должны быть Заголовок, Контент, по бокам "боковины окна", Подвал.

Контенет должен прокручиваться, так что бы Заголовок и Подвал всегда были на своих местах. т.о. общая прокрутка браузера не годится.

Я сверстал - ниже приведен код - но у моей верстки есть значительный минус - стрелочки у полос прокрутки прячутся под Заголовком и Подвалом.

Единственное решение которое я вижу, это определять размер рабочей области сайта подбирать и подставлять высоту блока #commonBlock для каждого из разрешений …. а без JS?

Ссылка на файл без JavaScript

Ссылка на файл c использованием JavaScript - это рабоий вариант, но он мне не нравится

Код:

<!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="header" style="background:#c9c;">header</div>

<div id="commonBlock" style="background:#9cc;">
   <div id="textBlock">
      begin text
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      content
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        end text
   </div>
</div>

<div id="sideLeft" style="background:#a80000;"><!-- --></div>
<div class="sideRight" style="background:#a80000;"><!-- --></div>

<div id="footerCommonBlock" style="background:#c9c;">footer</div>


</body></html>

Lann, скачивать непонятно что никто не будет. Это раз. Топик назван неверно, это два. Поскольку прокрутка по вертикали зависит от переполнения блока контентом по высоте. Отсюда и подскахка -- поставьте, при необходимых Вам величинах height блока overflow: scroll; (ну, или overflow-x если планируете работоспособность css3)

0 Сообщения: 5 Зарегистрирован: 31.05.07

2tentoys, скачивать вовсе не обязательно, листинг проблемы я привел. А кому интересно решение с использованием JS тот скачает.

Далее, если бы Вы не затруднились мельком проглядеть выложенный css, то overflow: auto; заметели бы. Поэтому вопрос осталяся в силе.

Тема неправельно? Может быть, хотя я так не считаю.

Спасибо за ответ.

Lann писал(а):

Далее, если бы Вы не затруднились мельком проглядеть выложенный css, то overflow: auto; заметели бы. Поэтому вопрос осталяся в силе.

У вас все блоки абсолютно спозиционированы. Все. Это действительно актуально, Ваша задача требует именно этого? И потом, эмуляция... какого размера должно быть "окно"? Неужели нельзя сделать одноколоночный сайт с хидером и подвалом (прибитыми в соответствующих местах), по-моему, даже на ДФ такие варианты рассматривались немерянно много раз. А основному окну задать прокрутку.

Попробуйте для блока #commonBlock задать что-нибудь вроде top:95px; посмотрите...
Кстати, Ваш css я смотрел

0 Сообщения: 5 Зарегистрирован: 31.05.07

Добрый день, к сож. моя задача требует именно этого. мне надо по бокам полоски (сверстать их можно было и по другому), но суть не в этом.

Суть в том что мне нужна прокрутка, но не стандартная браузерная. Все это дб действенным при любом разрешении.

Повторяюсь, я нашел решение, в т.ч. с использованием top:95 + JavaScript, который вычисялет раб. область и выставлеяет
у #commonBlock соответствующую height: вот исправленный скрипт

Но, прошу у вас совета, как сделать так же но без js - возможно ли это? т.к. при height=100% и top=95px все уезжает вниз
одновременно писать top & bottom - не работает.

Lann, вот Вам вариант

0 Сообщения: 5 Зарегистрирован: 31.05.07

Добрый день,
Опера overflow-y: scroll; не поняла
overflow: auto; - так нормально

И в ie7 проблемы. но это решаемо, я думаю. Спасибо за помощь!

DeДверь
Логин:
Пароль:
	Автологин