Как растянуть контент к прижатому вниз футеру?

@nerf74 · Регистрация: 26.05.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте! Такая проблема при верстке слоями (блоками): хочу сделать страницу с хедером, двумя колонками (левый сайдбар и контент) и футером. Сделал чтобы футер был прижат к низу страницы при помощи вставки пустого блока в конце контента и притягиванием выше (на размер этого пустого блока) футера. С футером все хорошо, сидит поживает себе спокойно снизу страницы, НО сайдбар и контент растягиваться сами до футера никак не хотят (честно, перепробовал уже кучу всяких примеров из гугла, скачивал готовые шаблоны - ничего не помогает

) То, что получилось - картинка 1 во вложениях.

В теории все просто: необходимо сделать так, чтобы sidebar и content занимали все доступное место в блоке conteiner2.. есть мысля, что через позиционирование делать, но как? (картинка 2 во вложениях)

код html страницы:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="language" content="ru" /> 
<meta name="description" content="блаблабла" /> 
<meta name="keywords" content="бла, бла, бла" /> 
<title>test</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
<div id="container1">
        <div id="header">
        HEADER
        </div>
        <div id="container2">
                <div id="sidebar"> 
                SIDEBAR
                </div>
                <div id="content">  
                CONTENT
                </div>
        </div>
        <div class="clearfloat"></div>
        <div id="emptyspace"></div>
</div>
<div id="footer"> 
FOOTER
</div>
</body>
</html>

код внешнего файла стилей style.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
* { 
border: 0; 
margin: 0; 
padding: 0;
} 
 
html { 
height: 100%;
width: 100%;
background-color: white;
text-align: center;
} 
 
body {
height: 100%;
width: 960px;
margin: 0 auto;
}
 
#container1 {
height:auto !important;
height:100%;
min-height:100%;
min-width:960px;
margin: 0 auto;
} 
 
#header {  
width: 960px; 
height: 120px;
background-color: brown; 
margin: 0 auto; 
}   
 
#sidebar {
float: left;
background-color: red;
width: 200px;
margin: 10px auto 0;
} 
 
#content {
float: right;
background-color: yellow;
width: 740px;
margin: 10px auto 0;
}
 
#emptyspace { 
height: 130px;
} 
 
.clearfloat {
clear: both;
}
 
#footer {
background-color: blue;
width: 960px;
height: 120px;
margin: -120px auto 0;
}

Подскажите, пожалуйста, как решить проблему? Заранее большое спасибо!

Donald28 · 14.06.2012, 12:12

У тебя для container2 content и sidebar не задана высота. Значит их высота будет зависеть от содержания этих блоков.

@nerf74 · 14.06.2012, 15:51 **[ТС]**

Сообщение от Donald28

У тебя для container2 content и sidebar не задана высота. Значит их высота будет зависеть от содержания этих блоков.

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

Donald28 · 14.06.2012, 16:00

Сообщение от nerf74

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

ну на самом деле что ты хочешь получить. Чтобы футер просто был прикреплен к низу окна браузера, даже при прокруке?

Либо ты хочешь, чтобы, если содержимое сайдбара и контента меньше высоты браузера, то футер внизу, а если больше высоты браузера, то футер появляется после прокрутки до низа страницы?

@nerf74 · 14.06.2012, 16:34 **[ТС]**

Сообщение от Donald28

ну на самом деле что ты хочешь получить. Чтобы футер просто был прикреплен к низу окна браузера, даже при прокруке?

Либо ты хочешь, чтобы, если содержимое сайдбара и контента меньше высоты браузера, то футер внизу, а если больше высоты браузера, то футер появляется после прокрутки до низа страницы?

второй вариант

у меня на сайте фон один, а у сайдбара, контента и футера фон уже другой.. поэтому получается как на картинке https://www.cyberforum.ru/atta... 1339421927

в итоге выглядит некрасиво

уже переделал сам каркас сайта на таблицах, но они мне очень не нравятся( хочу все-таки на дивах..

Donald28 · 14.06.2012, 16:55

Вам ведь только фон нужен. Тогда добавьте 2 последовательных дива внутри container1 со следующими стилями

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#sidebar_fon{
    position:absolute;
    float: left;
    background-color: red;
    width: 200px;
    margin: 10px auto 0;
    height: 100%
    }
 
#content_fon{
     position:absolute;
     float: right;
     background-color: yellow;
     width: 740px;
     margin: 10px auto 0;
     height:100%;
     }

@moisha · 14.06.2012, 18:16

а задать сайтбар и контент в пикселях нельзя обязательно должно быть в %

@nerf74 · 14.06.2012, 19:44 **[ТС]**

Сообщение от Donald28

Вам ведь только фон нужен. Тогда добавьте 2 последовательных дива внутри container1 со следующими стилями

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#sidebar_fon{
    position:absolute;
    float: left;
    background-color: red;
    width: 200px;
    margin: 10px auto 0;
    height: 100%
    }
 
#content_fon{
     position:absolute;
     float: right;
     background-color: yellow;
     width: 740px;
     margin: 10px auto 0;
     height:100%;
     }

что-то я не понимаю куда именно, у меня кракозября получилась)) точно в контейнер1 добавить, может во второй? и куда именно (после\перед самими сайдбаром и контентом)?

Сообщение от moisha

а задать сайтбар и контент в пикселях нельзя обязательно должно быть в %

ну у всех разные разрешения мониторов, разные настройки браузеров, кто-то в полный экран смотрит, кто-то в окошке... ну и сам контент может меняться, может на пол страницы, может на 2, 3, 4...

Donald28 · 14.06.2012, 19:48

Сообщение от nerf74

и куда именно (после\перед самими сайдбаром и контентом)?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container1">
<!-- попробуй сначала сюда -->
             <div id="sidebar_fon"></div>
             <div id="content_fon"></div>
             <div id="header">
                      HEADER
              </div>
<!-- а потом сюда -->
        <div id="container2">
                <div id="sidebar"> 
                SIDEBAR
                </div>
                <div id="content">  
                CONTENT
                </div>
        </div>
        <div class="clearfloat"></div>
        <div id="emptyspace"></div>
</div>

@nerf74 · 14.06.2012, 19:52 **[ТС]**

Сообщение от Donald28

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container1">
<!-- попробуй сначала сюда -->
             <div id="sidebar_fon"></div>
             <div id="content_fon"></div>
             <div id="header">
                      HEADER
              </div>
<!-- а потом сюда -->
        <div id="container2">
                <div id="sidebar"> 
                SIDEBAR
                </div>
                <div id="content">  
                CONTENT
                </div>
        </div>
        <div class="clearfloat"></div>
        <div id="emptyspace"></div>
</div>

неа, не получается( http://jsfiddle.net/7Tu8S/

Donald28 · 14.06.2012, 20:38

Сообщение от nerf74

height: 100%
}
#content_fon{

я здесь ";" забыл поставить

Добавлено через 11 минут
По экспериментировал я в присланном сервисе, и вот что получилось:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* { 
border: 0; 
margin: 0; 
padding: 0;
} 
 
html { 
height: 100%;
width: 100%;
background-color: white;
text-align: center;
} 
 
body {
height: 100%;
width: 960px;
margin: 0 auto;
}
 
#container1 {
height:auto !important;
height:100%;
min-height:100%;
min-width:960px;
margin: 0 auto;
} 
 
#header {  
position:relative;
z-index: 3;
width: 960px; 
height: 120px;
background-color: brown; 
margin: 0 auto; 
}   
 
#sidebar {
 position:relative;
z-index: 3; 
float: left;
width: 200px;
margin: 10px auto 0;
} 
 
#content {
     position:relative;
z-index: 3; 
float: right;
width: 740px;
margin: 10px auto 0;
}
 
#emptyspace { 
height: 130px;
} 
 
.clearfloat {
clear: both;
}
 
#footer {
     position:relative;
z-index: 3; 
background-color: blue;
width: 960px;
height: 120px;
margin: -120px auto 0;
}
 
#sidebar_fon {
    position:absolute;
    z-index:1;
    float: left;
    background-color: red;
    width: 200px;
    margin: 0 auto 0;
    height: 100%;
}
 
#content_fon {
     position:absolute;
     z-index:1; 
     background-color: yellow;
     width: 740px;
     margin: 0 10px 0 220px;
     height:100%;
}

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
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="language" content="ru" /> 
<meta name="description" content="блаблабла" /> 
<meta name="keywords" content="бла, бла, бла" /> 
<title>test</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
<div id="container1">
<!-- попробуй сначала сюда -->
     <div id="sidebar_fon"></div>
             <div id="content_fon"></div> 
             <div id="header">
                      HEADER
              </div>
<!-- а потом сюда -->
             
        <div id="container2">
                <div id="sidebar"> 
                SIDEBAR
                </div>
                <div id="content">  
                CONTENT
                </div>
        </div>
        <div class="clearfloat"></div>
        <div id="emptyspace"></div>
</div>
<div id="footer"> 
FOOTER
</div>
</body>
</html>

@nerf74 · 14.06.2012, 20:55 **[ТС]**

Сообщение от Donald28

я здесь ";" забыл поставить

Добавлено через 11 минут
По экспериментировал я в присланном сервисе, и вот что получилось:

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
* { 
border: 0; 
margin: 0; 
padding: 0;
} 
 
html { 
height: 100%;
width: 100%;
background-color: white;
text-align: center;
} 
 
body {
height: 100%;
width: 960px;
margin: 0 auto;
}
 
#container1 {
height:auto !important;
height:100%;
min-height:100%;
min-width:960px;
margin: 0 auto;
} 
 
#header {  
position:relative;
z-index: 3;
width: 960px; 
height: 120px;
background-color: brown; 
margin: 0 auto; 
}   
 
#sidebar {
 position:relative;
z-index: 3; 
float: left;
width: 200px;
margin: 10px auto 0;
} 
 
#content {
     position:relative;
z-index: 3; 
float: right;
width: 740px;
margin: 10px auto 0;
}
 
#emptyspace { 
height: 130px;
} 
 
.clearfloat {
clear: both;
}
 
#footer {
     position:relative;
z-index: 3; 
background-color: blue;
width: 960px;
height: 120px;
margin: -120px auto 0;
}
 
#sidebar_fon {
    position:absolute;
    z-index:1;
    float: left;
    background-color: red;
    width: 200px;
    margin: 0 auto 0;
    height: 100%;
}
 
#content_fon {
     position:absolute;
     z-index:1; 
     background-color: yellow;
     width: 740px;
     margin: 0 10px 0 220px;
     height:100%;
}

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
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="language" content="ru" /> 
<meta name="description" content="блаблабла" /> 
<meta name="keywords" content="бла, бла, бла" /> 
<title>test</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
<div id="container1">
<!-- попробуй сначала сюда -->
     <div id="sidebar_fon"></div>
             <div id="content_fon"></div> 
             <div id="header">
                      HEADER
              </div>
<!-- а потом сюда -->
             
        <div id="container2">
                <div id="sidebar"> 
                SIDEBAR
                </div>
                <div id="content">  
                CONTENT
                </div>
        </div>
        <div class="clearfloat"></div>
        <div id="emptyspace"></div>
</div>
<div id="footer"> 
FOOTER
</div>
</body>
</html>

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

@nerf74 · 14.06.2012, 20:59 **[ТС]**

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

Donald28 · 14.06.2012, 21:10

Сообщение от nerf74

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

Пиши в асю 4120три четыре 23 ноль

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	14.06.2012, 12:12
	У тебя для container2 content и sidebar не задана высота. Значит их высота будет зависеть от содержания этих блоков. 0

@moisha IT-Философ 98 / 19 / 0 Регистрация: 13.06.2012 Сообщений: 220
	14.06.2012, 18:16
	а задать сайтбар и контент в пикселях нельзя обязательно должно быть в % 0

@nerf74 0 / 0 / 0 Регистрация: 26.05.2012 Сообщений: 12
	14.06.2012, 20:59 [ТС]
	в итоге осталась одна проблема - сделать так, чтобы фон сайдбара был по размеру таким же, как и фон контента.. но насколько я знаю это ооооочень сложно и муторно делать.. Миниатюры 0