Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/14: Рейтинг темы: голосов - 14, средняя оценка - 4.86
458 / 366 / 94
Регистрация: 01.05.2010
Сообщений: 1,755
1

Макет из трех колонок. Прижать подвал к низу экрана

06.11.2012, 15:11. Показов 2837. Ответов 7
Метки нет (Все метки)

Здравствуйте, помогите пожалуйста решить следующую проблему:
Есть макет с тремя колонками на дивах. Левая и правая колонки фиксированной ширины, средняя занимает оставшуюся часть экрана.
Внизу размещен подвал. Если контента на сайте мало (не доходит до подвала), подвал должен оставаться внизу окна браузера. Если контента на сайте много, контент должен выталкивать подвал вниз.

Проблема в верстке макета.
Если применять позиционирование - колонки верстаются хорошо, но начинаются проблемы с подвалом. Если позиционирование не применять - подвал верстается хорошо, а с колонками возникают проблемы.

Покажите пожалуйста, как правильно сверстать.

Лучшее, чего смог пока добиться - это таки использовать позиционирование и приминить его также и к подвалу (фиксированное позиционирование). Но к сожелению фиксированное позиционирование подвала меня не устраивает. Контент должен выталкивать подвал.

Зарание спасибо!

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/*
HTML синтаксис:
<div id="container">
    <div id="header">HEADER</div>
    <div id="left">LEFT</div>
    <div id="content">CONTENT</div>
    <div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
*/
 
html, body { 
    margin: 0; 
    height: 100%; 
}
body { 
    min-width: 800px; 
}
#container { 
    position: relative;
    min-height: 100%; 
    
}
#header { 
    height: 100px; 
}
#left { 
    position: absolute;
    width: 200px; 
    padding-bottom: 50px; 
}
#content { 
    position: absolute;
    left: 200px;
    right: 200px;
    padding-bottom: 50px; 
}
#right { 
    position: absolute;
    width: 200px; 
    right: 0px;
    padding-bottom: 50px; 
}
#footer { 
    position: fixed;
    right: 0px;
    left: 0px;
    z-index: 1;
    height: 50px; 
    margin-top: -50px; 
}
 
#header {background: yellow;}
#footer {background: aqua;}
#left {background: green;}
#content {background: red;}
#right {background: maroon;}
Добавлено через 20 часов 12 минут
Это хотябы реально?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.11.2012, 15:11
Ответы с готовыми решениями:

Подвал прижать к низу
http://s32.prostoagency.ru/news/32/ Пацаны помогите прижать подвал к низу. position: absolute не...

Прижать подвал к низу
Здравствуйте! Признаюсь честно: забыл уже эти тонкости разметки... Нужно подвал прижать к низу...

Как прижать подвал сайта к низу страницы?
Здравствуйте, возникла проблема: не получается прижать подвал сайта к низу страницы(все способы...

Прижать к низу экрана
Пробую найти ответ, но не знаю как правильно записать в поиске. Мне нужно что бы блок был прижат к...

7
Администратор
11989 / 5319 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
06.11.2012, 15:24 2
как прижать футер к низу экрана
1
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.11.2012, 15:25 3
Зверушь, вот этот сайт мне самому недавно порекомендовали, очень полезная штука))
там можно все собрать.

http://csstemplater.com/
1
Администратор
11989 / 5319 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
06.11.2012, 16:05 4
z-z, так он не разберется толком. Лучше почитать, подумать и самому сделать. А не готовые макеты стягивать.
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.11.2012, 16:22 5
Taatshi, не знаю, кому как, но мне лгче бывает поковырять готовые коды. либо методом научного тыка без какой лиюо помощи делать))
0
458 / 366 / 94
Регистрация: 01.05.2010
Сообщений: 1,755
06.11.2012, 16:48  [ТС] 6
Taatshi, этот способ я знаю, но он не совсем подходит, так как в моем примере используюется позиционирование. Я пытался применить этот способ к своему макету, но ничего не вышло... из-за позиционирования футер не выталкивался... с двумя колонками было всё просто,а вот с тремя...

z-z, спасибо! Ссылка хорошая. Создал тот шаблон, который хотел, он работает. Сижу, пытаюсь разобраться как же именно он работает. А ведь именно этого я и хочу - разобраться. Слишком много вложенных блоков, тяжко... но ничего, разберусь!
0
Администратор
11989 / 5319 / 266
Регистрация: 05.04.2011
Сообщений: 14,088
Записей в блоге: 2
06.11.2012, 17:04 7
Зверушь, значит, нужен еще один дополнительный див-обертка.
1
458 / 366 / 94
Регистрация: 01.05.2010
Сообщений: 1,755
07.11.2012, 11:40  [ТС] 8
Taatshi, да, я это понял, но видимо не до конца... с позиционированием всё равно не получилось...

Генератор макетов, что дал z-z конечно хорош, но он сгенерировал столько странного кода, с кучей вложенных блоков, что я до сих пор не до конца разобрался зачем это всё нужно и как оно работает. Но сгенерированный шаблон навел меня на мысль о том, как сверстать колонки без позиционирования!

В итоге я написал css код макета, который работает, одко есть проблема в Хроме (как ни странно). Проблема заключается в том, что если изменить размер окна так, что футер дойдет до контента - исчезнут левая и правые панели... в остальных браузерах, даже в ИЕ все нормально.

Подскажите пожалуйста, что не так?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html, body {
    margin: 0;
    height: 100%;
}
html {
    overflow: scroll;
}
body {
    min-width: 800px;
}
#container {
    min-height: 100%;
}
#header {
    height: 100px;
}
#content {
    padding: 0 220px;
    padding-bottom: 50px;
    float: left;
}
#left {
    width: 200px;
    margin-left: -100%;
    float: left;
    padding-bottom: 50px;
}
#right {
    width: 200px;
    margin-left: -200px;
    float: left;
    padding-bottom: 50px;
}
#footer {
    height: 50px;
    margin-top: -50px;
    clear: both;
}
 
 
#header {background: yellow;}
#footer {background: aqua;}
#left {background: green;}
#content {background: red;}
#right {background: maroon;}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="maket04.css" />
</head>
 
<body>
<div id="container">
    <div id="header">HEADER
    </div>
    
    <div id="content">CONTENT
    <p>dfasdfgad sfffff asdfasdfas dfasdfasdfasdfasdfasdfdfa sdfgadsf ffffasdfasdfasdfa sdfasdfasdfasdf asdfdfas dfgadsf ffffasdfasdfa
    dfasdfga dsffff fasdfa sdfasd fasdfasdfas dfasdfas dfdfasdfg adsffff fasdfasdf asdf asdfasd fasdfas dfasdfd fasdf gadsfffff asdfasdfasdfasdf asdf asdfasdfasdf
    dfasdfga dsfff ffas dfasdfasd fasdfasdfasdfa sdfasdfd fasdfgadsf ffffasdfas dfasdfas dfasdfasdfas dfasdf dfasdfgadsfffffasd fasdfasdf asdfasdfa sd asdfasdf
    dfasdfgadsffff fasdfasd fasdfasdf asdfasdfasdfasdfdfas dfgadsfff ffasdfasdfasdfasdfasdfasdfasdfasdfdfasdfgadsff fffasdfasdfasdfasdfasdfasdf asdfasdf
    dfasdf gadsfffffasdf asdfas dfasdfasdf as dfa sdfa sdfdfasdfgadsfff ffasdfasdfasdfasdfasdfasdfasdfasdfdfasdfgadsffff fasdfasdfasdfasd fasdfasdfasdfasdf
    dfasdfgadsf ffffasdfasdfa sdfa sdfasdfasdfasdfasdfdfasdfgadsfffffasdf asdfa sdfasdfasdfasdfasdfasdfdfasdfgadsfff ffasdfasdfasdfa sdfasdfasdfasdfasdf
    dfas dfgadsf ffffa sdfasdfasdfa sdfasdfasdfasdfas dfdfasdfgadsfffffasdfasdfa sdfasdfasdfasdfasdfasdfdfasdfgadsff fffasdfasdfasdfasdfasdfasdfasd fasdf</p>
    </div>
    
    <div id="left">LEFT
    </div>
    
    <div id="right">RIGHT
    </div>
    
</div>
 
<div id="footer">FOOTER
</div>
</body>
</html>
Добавлено через 57 минут
Ну вот, кажется сделал, теперь и в хроме работает. Пришлось блок с контентом завенуть еще в один блок... не понимаю...(((

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
HTML синтаксис:
<div id="container">
    <div id="header">HEADER</div>
    <div id="contentbox">
        <div id="content">CONTENT</div>
    </div>
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
*/
 
html, body {
    margin: 0;
    height: 100%;
}
html {
    overflow: scroll;
}
body {
    min-width: 800px;
}
#container {
    min-height: 100%;
}
#contentbox { /* Без этого блока в Хроме пропадают левая и правая панели при стыковке контента с футером */
    width: 100%;
    float: left; /* Без этого свойства в ИЕ левая и правая панели ведут ведут себя странно и могут немного уезжать за край экрана*/
}
#header {
    height: 100px;
}
#content {
    padding: 0 220px;
    float: left;
    padding-bottom: 50px;
}
#left {
    width: 200px;
    margin-left: -100%;
    float: left;
    padding-bottom: 50px;
}
#right {
    width: 200px;
    margin-left: -200px;
    float: left;
    padding-bottom: 50px;
}
#footer {
    height: 50px;
    margin-top: -50px;
    clear: both; /* Без этого свойства при стыкавке контента с футером фон футера уезжает вверх */
}
 
 
#header {background: yellow;}
#footer {background: aqua;}
#left {background: green;}
#right {background: maroon;}
body {background: red;}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.11.2012, 11:40

Прижать блок к низу экрана
Здравствуйте. Вертикальную черную полоску портфолио не могу прижать к низу экрана. С помощью...

Прижать футер к низу экрана
Как сделать так, чтобы при уменьшении масштаба (отдалении) страницы блок footer не прыгал вверх?...

Не получается прижать футер к низу экрана
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...

Резиновый блок - прижать футер к низу экрана
Есть шапка(#block1), есть футер(#block3). Шапка прижата к верхней границы, футер соответственно к...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.