PDA

Просмотр полной версии : top, bottom и overflow в CSS

TTS
02.02.2006, 16:06
задача: оставить шапку вверху страницы, скролить только контент
Т.е. див с контентом должен начинаться от нижнего края шапки и тянуться до нижнего края окна браузера и иметь скролбар такой же высоты
в стиле дива с контентом я прописал (сто пикселей на шапку):
top: 100px;
bottom: 0px;
overflow: auto;

в фф это все работает прекрасно, а вот ие не понимает, растягивает див на всю ширину контента и скролит весь документ вместе с шапкой

как бы решить енту проблемку?
deathstorm
02.02.2006, 16:47
есть мыслся, простая до безобразия
сделать 2 дива (одним по другим
TTS
02.02.2006, 16:56
вопрос не понят до безобразия

если короче, нужно нарисовать див высотой на xxx пикселей меньше высоты окна браузера и прилепить его к нижнему краю окна браузера
средствами css
и чтоб везде работало

ие в принципе не понимает совместного использования top и bottom, равно как left&right. перспектива мрачная, в ней светит джаваскрипт...
а не хочется... ой как не хочется...
CAM
02.02.2006, 19:44
podskazku ili rabo4ii primer?
ya kak to polgoda nazad imelsya :( no reshul :)

sorry za lat net vremeni na rabote v slepuu klikat'?
TTS
02.02.2006, 19:51
podskazku ili rabo4ii primer?
Как тебе проще. Спасибо.
Я, честно говоря, начал уже с помощью таблицы лабать.
Тут, правда, еще одна проблема появилась. Но это потом, сначала сам голову поломаю
CAM
02.02.2006, 20:04
<style type="text/css">

html {
width:100%; height:100%;
overflow:hidden;
}

body {
width:100%; height:100%;
margin:0; padding:0;
overflow:auto;
font-family:Arial;
font-size:12px;

}

#content {

text-align: center;
margin-top:15px;

}
#menu {
position:absolute;
top:0px;
background: url(images/bg_toolbar.png) repeat-x fixed;
width: 100%;
height: 30px;
}

#conteiner-txtbar {
padding-top:2px;
width:760px;
text-align: center;
margin-left: auto;
margin-right: auto;

}
</style>
</head>

<body>
<div id="menu">
<div id="conteiner-txtbar"></div>
</div>
CAM
02.02.2006, 20:17
update :) eto nedodelanui

html {
width:100%; height:100%;
overflow: hidden;
}
body {
width:100%; height:100%; overflow:auto;
margin:0; padding:0;
font-family:Arial; font-size:12px;
text-align:center;
}
#menu {
position:absolute;
background: url(images/bg_toolbar.png) repeat-x fixed;
width:100%; height:30px;
right:17px; z-index:1;

}
#conteinerTxtBar {
width:760px;height:30px;
text-align: center;color:#CCC;
margin-left: auto; margin-right: auto;
background:url(images/topRight_bgMov.gif) no-repeat right top;
padding-bottom:4px;
}
TTS
02.02.2006, 20:29
Ннннеее...
В моей задачке "overflow: auto" должно быть прописано не у боди, а у conteinerTxtBar. И высота его не 30px, а что-нить типа "100% минус высота шапки"
CAM
02.02.2006, 23:18
conteinerTxtBar это и есть шапка
<body>
<div id="шапка-conteiner">
<div id="шапка"></div>
</div>
<div id="content h:100%">...</div>

есле не-то пришли jpeg layout-a
посмотрим удачиЖ)
TTS
03.02.2006, 00:09
в фф это выглядит как надо
в ие див с контентом уползает за край экрана на 100рх, т.к. имеет высоту 100% и верхний отступ 100рх
CAM
03.02.2006, 02:40
<div conteiner content hight:100%>
<div content padding-top:100px></div>
</div>
glavnoe pravilo dlya vseh blokov width and hight v meste s paddingom i marginom sushestvovat' nemogut!!!
TTS
03.02.2006, 03:56
мне уже становится жалко тебя мучить
ты до сих пор не понял суть проблемы (или уже я сплю на ходу)

да, padding-top оставляет пустое место сверху. эт хорошо.
теперь подумай, как сделать, чтобы когда текста будет слишком много и он перестанет влезать в окно, скроллер крутил бы только текст и не трогал шапку.
Т.е. сделать некое подобие фреймсета без фреймсета

более менее удалось свести браузеры к одному знаенателю
здесь пример http://iaminthe.net/damnedpositioning/
работает и в фф и в ие. в опере не работает
и сделан через сам знаешь какое место
Nirva
03.02.2006, 06:42
ну вы тут и развернулись =)
если такой короткий js для тебя не мрачен то вобщем-то как-то так


//во всех случаях высоту меняешь как .style.height = ..
if (window.innerHeight) {
...
} else if (document.documentElement && document.documentElement.clientHeight) {
...
} else if (document.body) {
...
}
TTS
03.02.2006, 07:09
оно, конечно, спасибо
я уже разрулил по-другому
подставляю под каждый браузер свой css-файл (нарочно, чтоб ети стандартизаторы в гробу перевернулись!)
для ie
height: expression(document.body.offsetHeight-98);

для всех остальных
top: 98px;
bottom: 0px;

вроде как жс есть, а вроде и нету... Главное, душа спокойна. И без таблиц обошлось
спасибо интернету за бездвоздмездно предоставленные фичи