Новая тема   Ответить

 just_beginner
голова болит уже, подскажите как разметить страницу дивами и css:
1. шапка - высота 100пкс, в самом верху экрана
2. контент - ресайзится автоматом заполняя всю доступную ширину
3. футер - высота 100пкс, в самом низу экрана при любом разрешении, если разрешение мелкое то он не перекрывает контент, а у окна появляется вертикальный скролл

спасибо

 adult-designer
проблема в том, что когда мало контента футер не привязывается к низу а идет сразу за контентом и снизу место остается пустое?

 just_beginner
щас постараюсь донести
вообщем имеем то что описал. когда я верстаю получается либо:
1. все идет по порядку, но футер не привязан к нижней части экрана, т.е. при большом разрешении там под футером остается место пустое - некрасиво
2. привязываю футер к нижней части экрана задавая ему position: absolute; bottom: 0; тогда при больших разрешениях все клева но при скажем 800пкс в высоту футер понятное дело перекрывает контент

как то так

 adult-designer
тут кое-чего попалось на глаза посмотри, может удастся решить проблему этим:

overflow
значения - none, clip, scroll
значение по умолчанию - none
поддерживается - элементами, у которых свойство 'position' установлено как 'absolut'
наследование - нет

Это свойство управляет тем, что произойдет, если содержимое элемента выйдет за его границы: clip - обрежет выступающие части элемента, scroll - создаст полосы прокрутки, для просмотра.

 just_beginner
да не, это типа варнинг страница и ссылка ENTER видимая только после прокрутки непойдет
мне нужно именно растянуть три дива по вертикали и чтобы контент не прятался под футер при мелком разрешении..

 adult-designer
да, проблема такая есть.... проще имхо забить
но вот можешь посмотреть статейку
_http://xhtml.ru/2005/12/12/body_height_research/
может на какие мысли и подтолкнет, даже хз

 Heavy
имхо, раз уж решились так делать, то лучше сдалать так -

хидер в топе,
тело на всю высоту,
внизу футер.

все это делается, как вариант, через абсолютное позиционирование и отсупы.

а что бы скрол нормальный был - то в тело вложить div с контентом "середины" - которому overflow-y: scroll поставить. тогда будет прокрутка только для центральной части, а футер и хидер будут на месте сидеть.

 just_beginner
Heavy: привет
так вот в том и проблема - мне не надо скроллы. мне нужно чтобы эти три дива нормально отображались, чтобы футер при любом разрешении висел в нижней части, но при мелком разрешении не перекрывал контент и у контента небыло скролла, а скрол появлялся бы у окна, типа чтобы футер из видимой области сваливал нахуй

 Vigo
если футер не замысловатый то можно в цсс прописать его как БГ страницы и прописать там боттом

 just_beginner

это былобы слишком просто %)
футер состоит из 3 частей:
1. бэкграунд который по всей ширине нижней части сайта
2. кусок бэкграунда который в самом центре футера, там иллюстрация и место для текста
3. сам текст

 just_beginner
есть еще идеи у кого?

 AWMovies
протупил, сорри.%)

 Sha
Есть в css2 такой товарисч
min-height
который мог бы хоть как-то помочь.
Так вот засранец IE6 передает привет.

 just_beginner
Sha писал:
может я непонимаю чего, но и эту фичу уже пробавал
футер у меня постоянно снизу только при параметрах position: absolute; bottom: 0;
а при таком раскладе ему пох на min-height какого то там контента перекрыват полюбому

 Vigo
код стиля

html, body{
height:100%;
margin:0;
padding:0;
min-height:100%;
}
#contents{
min-height:95%;
margin:0;
position:relative;
}
/* holly hack to target IE win Only \*/
* html #contents{
height:95%;
}
/* end hack */

#footer{
position:relative;
top:-5%;
height:5%;
}
* html #footer{ /*IE */
top:0;
}
| * > #footer{ /* Opera using CSS3 selectors that other browsers will support later, look out */
top:0;
}



код страницы

<div id="contents"> main content</div>
<div id="footer">footer </div>

проверил,работает

 Vigo
вот еще способ

http://www.themaninblue.com/experiment/footerStickAlt/

 Sha
Vigo писал:
Это только на крайняк.
Попробуй поресайзить окно и поймёшь почему я этот вариант не стал писать.