Bootstrap 3. Прижать футер книзу страницы

@morda77 · Регистрация: 22.12.2012

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

Кто-нибудь знает, как в Bootstrap 3 прижать футер книзу страницы окна браузера?
Спасибо.

Добавлено через 30 минут
Пробую, как в штатном CSS обернуть все содержимое в класс, к примеру, fix со стилями:

CSS
1
2
3
4
5
6
.fix{
        max-width: 100%;
    margin:0 auto;
    min-height:100%;
    position:relative;
}

а классу footer задать:

CSS
1
2
bottom:0;
        position: absolute;

Ничего не выходит. Футер сжимается по ширине, а книзу так и не прижимается.

Добавлено через 58 секунд
Есть, кто в теме?)

mihalken · 16.06.2014, 08:13

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

как в Bootstrap 3 прижать футер книзу

Не пользуюсь bootstrap, но дам обычный вариант:

CSS
1
2
3
4
5
6
7
8
.footer {
    border: solid 1px silver;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    text-align: center;
}

HTML5
1
<div class="footer">Footer block</div>

Демо
?

@morda77 · 18.06.2014, 05:59 **[ТС]**

mihalken, не то. Футер хоть и прижат книзу, но живет отдельно от других блоков, на них наезжая при скролинге. Типа, прибит к экрану в одном месте.

@Academik · 18.06.2014, 15:16

morda77, http://jsfiddle.net/277Wz/1/

CSS
1
2
3
4
5
6
7
8
9
10
11
html{height: 100%;}
body{position: relative; min-height: 100%;}
.content{
    padding: 0 0 50px 0;
}
.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

HTML5
1
2
3
4
5
6
<div class="content">
 
</div>
<div class="footer">
 
</div>

@morda77 · 19.06.2014, 03:06 **[ТС]**

Mr Coder, сделал. Не прижимается.

@shmonoff · 19.06.2014, 10:08

попробуй прописать body {width:100%; height:100%;}

@morda77 · 19.06.2014, 13:24 **[ТС]**

shmonoff, вообще никакой разницы.

@Academik · 19.06.2014, 18:02

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

Mr Coder, сделал. Не прижимается.

Я ведь даже ссылку в песочницу дал чтоб результат вы посмотрели. Если у вас не получилось, давайте ссылку или код, будем смотреть. Вероятно вы что-то пропустили.

@morda77 · 20.06.2014, 02:29 **[ТС]**

Mr Coder, буду признателен.

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>Тестовый шаблон</title>
</head>
 
        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS Bin</title>
 
  <body>
 
    <div class="fix">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
            <div id="header">
                <div class="header">
                <div class="col-sm-6">
                    <div class="logo"></div>
                </div>
                <div class="col-sm-6">
                    <div class="phone">
                      <ul>
                        <li>+7(499) 777-77-77</li>
                        <li>+7(499) 777-77-77</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
                    
        
            <!--Адаптивная навигация-->
     
     <!--Положение меню и выпадающее меню-->
       
          
             
                <div class="navbar navbar-inverse"> <!--(navbar-static-top) - Панель навигации снаружи контейнера, статичная-->
                <div class="container">
                   <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"><!--Адаптивная кнопка навигации-->
                     <span class="sr-only">Открыть навигацию</span><!--"sr-only" - видно только на устройствах "screen reader" - для слепых-->
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span><!--Черточки на ад        аптивной кнопке навигации-->
                       </button>
                       
                   <div class="class collapse navbar-collapse" id="responsive-menu"><!--Адаптивные пункты навигации-->
                       <ul class="nav navbar-nav">
                           <li><a href="#">Главная</a></li>
                           <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Каталог<b class="caret"><!--(b class="caret") - кнопка в виде треугольника--></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#">Пункт 1</a></li>
                               <li><a href="#">Пункт 2</a></li>
                               <li><a href="#">Пункт 3</a></li>
                               <li class="divider"></li><!--Разделитель (divider)-->
                               <li><a href="#">Пункт 4</a></li>
                           </ul>
                           </li>
                           <li><a href="#">Доставка и оплата</a></li>
                           <li><a href="#">Прайс-лист</a></li>
                           <li><a href="#">Контакты</a></li>
                       </ul>
                   </div>
                </div>      
             </div> 
            </div>
            
            
            <div class="slide">
            </div>
        
        <div class="container">
        <div class="col-sm-4">
            <div class="blok-1">
                <h1>Новости</h1>
                <br>
                <p>14 сентября 2013 г.
Редизайн веб-сайта архитектурного бюро.</p>   
        <br>                
<p>14 сентября 2013 г.
Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.</p>
<br>
<p>14 сентября 2013 г.
SEO-продвижение сайта поставщика дизель генераторов.</p>
                <br>        
<p>14 сентября 2013 г.
Поисковое продвижение веб-сайта поставщика гидрооборудования</p>
            <br>    
            <a href="#" class="arhiv_news">Архив новостей</a>
            </div>
        </div>
        <div class="col-sm-7 col-md-offset-1 col-sm-offset-1">
            <div class="blok-2">
            <h1>Компания «Пиксель Плюс»</h1>
 
<p>Компания «Пиксель Плюс» существует более 6 лет, за это время мы принимали участие в разработке более чем 700 сайтов, поэтому можем уверенно называть себя профессионалами. На данный момент наш коллектив состоит из более чем 30 сотрудников работающих в двух офисах в Москве и Зеленограде.</p>
 
<p>Одним из основных направлений работ нашей компании является поисковое продвижение сайтов, на данной момент мы работаем с более чем 150 постоянными клиентами по более чем 11 000 поисковым запросам. При этом в работе основной акцент мы делаем на качестве работ, а так же применяем собственные уникальные разработки в области SEO продвижения. На данный момент отдел SEO состоит из 9 человек под руководством ведущего специалиста, преимущественно работающих в нашем московском офисе.</p>
 
<p>Наша компания является золотым сертифицированным партнёром «1С-Битрикс» (сертификат № 33939 с 2007 по 2013), что ещё раз подтверждает квалификацию наших сотрудников. В январе 2013 мы стали лидерами продаж продуктов «1С-Битрикс» и вошли в число лучших разработчиков сайтов России. Все специалисты занимающиеся изготовлением сайтов проходят обязательную сертификацию «1С-Битрикс» в течении первых 6 месяцев работы в компании, после чего продолжают непрерывно поддерживать и развивать свои профессиональные навыки.</p>
        </div>
    </div>
</div>
 
 
    <div class="col-sm-12">
        <div id="footer">
            <div class="footer">
                
                    <div class="name">    
                       <p>© 2012–2013 ЗАО «Компания»</p>  
                       <a href="#">info@name.ru</a>
                    </div>
                    <!--<div class="menu">
                       <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Каталог</a></li>
                            <li><a href="#">Доставка и оплата</a></li>
                            <li><a href="#">Прайс-лист</a></li>
                            <li><a href="#">Контакты</a></li>  
                       </ul>
                    </div>-->
                   
                </div>
            </div>
        </div>
    </div>   
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
html{height: 100%;}
 
body{
    background-color: #fff;
    position: relative;
    min-height: 100%;
}
 
.container-fluid{
  border:2px solid #00a5f5;
  background-color: #fff;
}
 
.fix{
    padding: 0 0 50px 0;
    /*max-width: 100%;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;*/
}
 
 
/*
[class*='col-']
Означает выбор элементов, у которых атрибут class имеет подстроку col-.*/
 
[class*='col-'] {
  min-height: 50px;
  padding: 10px;  
  border: 0px solid #ffcf61;
}
 
 
/* Желательно стили колонкам вообще не задавать - они как контейнеры. Добавление чего-то еще (размеры, отступы) может только испортить верстку. Стили лучше задавать дочерним элементам. */
 
 
/*
[class*='col-']>* означает выбор всех непосредственных дочерних элементов внутри выборки [class*='col-'].
*/
 
[class*='col-']>* {
  text-align: center;
  background: #545454;
  color: #fff;
  height: 108px;
  border: 0px solid #57f9ff;
}
 
#header{
    background: #DCDCDC;
    height: 230px;
    border: 2px solid #57f9ff;
    padding: 40px;
    font-size: 24px;
    margin-bottom: 0px;
}
 
@media screen and (max-width: 768px){
#header{
        height: 300px;
      }
}
 
@media screen and (max-width: 400px){
#header{
        height: 470px;
      }
}
 
.header{
    max-width: 1110px;
    position: relative;
    height: 220px;
    margin:0 auto
}
 
.logo{
    background: #DCDCDC;
    background-image:url(../img/logo.png);
    background-repeat: no-repeat;
    /*width: 273px;*/
    height: 100px;    
    border: 0px solid #57f9ff;
}
 
 
.phone{
    background: #DCDCDC;
    /*width: 273px;*/
    height: 100px;
    border: 0px solid #57f9ff;
    color:#777777;
}
 
a{
    color: #fff;
}
 
a:hover{
    color: #fff;
}
 
li{
    list-style: none;/*Убираем маркеры в списках*/
}
 
.navbar{
    margin: -10px;
}
 
 
.slide{
    background-image:url(../img/slide.png);
    height: 400px;
    max-width:100%;
    /*Выровнять изображение по центру и добавить отступ снизу.*/
    margin:0 auto 30px auto;
    display:block;
}
 
@media(min-width:200px){ /*Изменения будут внесены только для шаблона шириной свыше 400px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
 
@media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
  }  
 
 
.blok-1{
    height: 560px;
    background-color:#767676;
    color: #fff;
    text-align: left;
    padding: 20px 40px 40px;
}
 
.arhiv_news{
    margin-left: 150px
}
 
.blok-2{
    height: 560px;
    background-color:#fff;
    color: #767676;
    text-align: left;
    padding: 20px 40px 40px;
}
 
#footer{
    height: 220px;
    margin-top: 200px;
    outline: 1px solid #00FF00;
    background-color: #767676;
    /*Прижимаем футер книзу страницы окна браузера*/
    
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}
 
 
.footer{
    height: 220px;
    max-width: 1150px;
    bottom:0;
    outline: 1px solid #00FF00;
    margin: 0 auto;
    background-color: #767676;
}
 
.name{
    max-width: 210px;
    margin: 50px 20px;
    text-align: left;
}
 
.menu{
    max-width: 210px;
    margin: 50px 0px;
    text-align: left;
}

Пока так.

http://fh7905sb.bget.ru/my-mak... otstrap-2/

@monochromer · 20.06.2014, 10:02

.footer должен быть на одном уровне с .fix.

Зачем помещать футер в col-sm-12. Это и так блочный элемент и он будет на всю ширину родителя. Тем более что он и мешает применить технику прижатия футера.

@morda77 · 20.06.2014, 11:19 **[ТС]**

monochromer, ."footer должен быть на одном уровне с .fix." - Вы имеете в виду, внутри одного блока?

@monochromer · 20.06.2014, 14:08

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

Вы имеете в виду, внутри одного блока?

HTML5
1
2
3
4
<body>
  <div class="fix"></div>
  <div class="footer"></div>
</body>

@morda77 · 20.06.2014, 18:04 **[ТС]**

monochromer, сделал:

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>Тестовый шаблон</title>
</head>
 
        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS Bin</title>
 
  <body>
 
    <div class="fix">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
            <div id="header">
                <div class="header">
                <div class="col-sm-6">
                    <div class="logo"></div>
                </div>
                <div class="col-sm-6">
                    <div class="phone">
                      <ul>
                        <li>+7(499) 777-77-77</li>
                        <li>+7(499) 777-77-77</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
                    
        
            <!--Адаптивная навигация-->
     
     <!--Положение меню и выпадающее меню-->
       
          
             
                <div class="navbar navbar-inverse"> <!--(navbar-static-top) - Панель навигации снаружи контейнера, статичная-->
                <div class="container">
                   <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"><!--Адаптивная кнопка навигации-->
                     <span class="sr-only">Открыть навигацию</span><!--"sr-only" - видно только на устройствах "screen reader" - для слепых-->
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span><!--Черточки на ад        аптивной кнопке навигации-->
                       </button>
                       
                   <div class="class collapse navbar-collapse" id="responsive-menu"><!--Адаптивные пункты навигации-->
                       <ul class="nav navbar-nav">
                           <li><a href="#">Главная</a></li>
                           <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Каталог<b class="caret"><!--(b class="caret") - кнопка в виде треугольника--></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#">Пункт 1</a></li>
                               <li><a href="#">Пункт 2</a></li>
                               <li><a href="#">Пункт 3</a></li>
                               <li class="divider"></li><!--Разделитель (divider)-->
                               <li><a href="#">Пункт 4</a></li>
                           </ul>
                           </li>
                           <li><a href="#">Доставка и оплата</a></li>
                           <li><a href="#">Прайс-лист</a></li>
                           <li><a href="#">Контакты</a></li>
                       </ul>
                   </div>
                </div>      
             </div> 
            </div>
            
            
            <div class="slide">
            </div>
        
        <div class="container">
        <div class="col-sm-4">
            <div class="blok-1">
                <h1>Новости</h1>
                <br>
                <p>14 сентября 2013 г.
Редизайн веб-сайта архитектурного бюро.</p>   
        <br>                
<p>14 сентября 2013 г.
Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.</p>
<br>
<p>14 сентября 2013 г.
SEO-продвижение сайта поставщика дизель генераторов.</p>
                <br>        
<p>14 сентября 2013 г.
Поисковое продвижение веб-сайта поставщика гидрооборудования</p>
            <br>    
            <a href="#" class="arhiv_news">Архив новостей</a>
            </div>
        </div>
        <div class="col-sm-7 col-md-offset-1 col-sm-offset-1">
            <div class="blok-2">
            <h1>Компания «Пиксель Плюс»</h1>
 
<p>Компания «Пиксель Плюс» существует более 6 лет, за это время мы принимали участие в разработке более чем 700 сайтов, поэтому можем уверенно называть себя профессионалами. На данный момент наш коллектив состоит из более чем 30 сотрудников работающих в двух офисах в Москве и Зеленограде.</p>
 
<p>Одним из основных направлений работ нашей компании является поисковое продвижение сайтов, на данной момент мы работаем с более чем 150 постоянными клиентами по более чем 11 000 поисковым запросам. При этом в работе основной акцент мы делаем на качестве работ, а так же применяем собственные уникальные разработки в области SEO продвижения. На данный момент отдел SEO состоит из 9 человек под руководством ведущего специалиста, преимущественно работающих в нашем московском офисе.</p>
 
<p>Наша компания является золотым сертифицированным партнёром «1С-Битрикс» (сертификат № 33939 с 2007 по 2013), что ещё раз подтверждает квалификацию наших сотрудников. В январе 2013 мы стали лидерами продаж продуктов «1С-Битрикс» и вошли в число лучших разработчиков сайтов России. Все специалисты занимающиеся изготовлением сайтов проходят обязательную сертификацию «1С-Битрикс» в течении первых 6 месяцев работы в компании, после чего продолжают непрерывно поддерживать и развивать свои профессиональные навыки.</p>
        </div>
    </div>
</div>
 
 
    
        <div id="footer">
            <div class="footer">
                  <div class="name">    
                       <p>© 2012–2013 ЗАО «Компания»</p>  
                       <a href="#">info@name.ru</a>
                    </div>
                    <!--<div class="menu">
                       <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Каталог</a></li>
                            <li><a href="#">Доставка и оплата</a></li>
                            <li><a href="#">Прайс-лист</a></li>
                            <li><a href="#">Контакты</a></li>  
                       </ul>
                    </div>-->
                   
                </div>
            </div>
        </div>
    </div>   
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
html{height: 100%;}
 
body{
    background-color: #fff;
    position: relative;
    min-height: 100%;
}
 
.container-fluid{
  border:2px solid #00a5f5;
  background-color: #fff;
}
 
.fix{
    padding: 0 0 50px 0;
    /*max-width: 100%;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;*/
}
 
 
/*
[class*='col-']
Означает выбор элементов, у которых атрибут class имеет подстроку col-.*/
 
[class*='col-'] {
  min-height: 50px;
  padding: 10px;  
  border: 0px solid #ffcf61;
}
 
 
/* Желательно стили колонкам вообще не задавать - они как контейнеры. Добавление чего-то еще (размеры, отступы) может только испортить верстку. Стили лучше задавать дочерним элементам. */
 
 
/*
[class*='col-']>* означает выбор всех непосредственных дочерних элементов внутри выборки [class*='col-'].
*/
 
[class*='col-']>* {
  text-align: center;
  background: #545454;
  color: #fff;
  height: 108px;
  border: 0px solid #57f9ff;
}
 
#header{
    background: #DCDCDC;
    height: 230px;
    border: 2px solid #57f9ff;
    padding: 40px;
    font-size: 24px;
    margin-bottom: 0px;
}
 
@media screen and (max-width: 768px){
#header{
        height: 300px;
      }
}
 
@media screen and (max-width: 400px){
#header{
        height: 470px;
      }
}
 
.header{
    max-width: 1110px;
    position: relative;
    height: 220px;
    margin:0 auto
}
 
.logo{
    background: #DCDCDC;
    background-image:url(../img/logo.png);
    background-repeat: no-repeat;
    /*width: 273px;*/
    height: 100px;    
    border: 0px solid #57f9ff;
}
 
 
.phone{
    background: #DCDCDC;
    /*width: 273px;*/
    height: 100px;
    border: 0px solid #57f9ff;
    color:#777777;
}
 
a{
    color: #fff;
}
 
a:hover{
    color: #fff;
}
 
li{
    list-style: none;/*Убираем маркеры в списках*/
}
 
.navbar{
    margin: -10px;
}
 
 
.slide{
    background-image:url(../img/slide.png);
    height: 400px;
    max-width:100%;
    /*Выровнять изображение по центру и добавить отступ снизу.*/
    margin:0 auto 30px auto;
    display:block;
}
 
@media(min-width:200px){ /*Изменения будут внесены только для шаблона шириной свыше 400px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
 
@media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
  }  
 
 
.blok-1{
    height: 560px;
    background-color:#767676;
    color: #fff;
    text-align: left;
    padding: 20px 40px 40px;
}
 
.arhiv_news{
    margin-left: 150px
}
 
.blok-2{
    height: 560px;
    background-color:#fff;
    color: #767676;
    text-align: left;
    padding: 20px 40px 40px;
}
 
#footer{
    height: 220px;
    margin-top: 200px;
    outline: 1px solid #00FF00;
    background-color: #767676;
    /*Прижимаем футер книзу страницы окна браузера*/
    
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}
 
 
.footer{
    height: 220px;
    max-width: 1150px;
    bottom:0;
    outline: 1px solid #00FF00;
    margin: 0 auto;
    background-color: #767676;
}
 
.name{
    max-width: 210px;
    margin: 50px 20px;
    text-align: left;
}
 
.menu{
    max-width: 210px;
    margin: 50px 0px;
    text-align: left;
}

Такая вот хрень получилась: http://fh7905sb.bget.ru/my-mak... otstrap-2/

@yan_azov · 20.06.2014, 18:14

CSS
1
2
3
4
5
.name {
max-width: 210px;
padding: 50px 20px;
text-align: left;
}

вот тут замени маржин на паддинг.

HTML5
1
2
<div id="footer">
            <div class="footer">

и вообще конструкция не очень...масло масленное....

@monochromer · 20.06.2014, 20:26

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

сделал

Судя по коду, все осталось без изменений.

@morda77 · 21.06.2014, 17:52 **[ТС]**

monochromer, Ну вот сделал:

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
.fix{
    /*padding: 0 0 50px 0;
    max-width: 100%;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;*/
     max-width: 100%;
    margin:0 auto;
    min-height:100%;
    position:relative;
}
 
#footer{
    height: 220px;
    margin-top: 200px;
    outline: 1px solid #00FF00;
    background-color: #767676;
    /*Прижимаем футер книзу страницы окна браузера*/
    
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

И ничего не изменилось. Где-то мои стили друг другу противоречат?

У меня там еще есть

CSS
1
2
3
4
5
6
7
8
.footer{
    height: 220px;
    max-width: 1150px;
    bottom:0;
    outline: 1px solid #00FF00;
    margin: 0 auto;
    background-color: #767676;
}

Он внутри блока footer. Может в нем дело?

Хотя, нет. Удалил <div class="footer"> и блок footer все равно не прижимается и наезжает на верхние блоки.

@monochromer · 21.06.2014, 18:20

Зачем margin-top: 200px;?
Наверно, margin-top: -200px;

Смотрите пример Вашего макета здесь (без Bootstrap) - http://monochromer.esy.es/port... elplusru2/
Код для прижатия футера:

HTML5
1
2
3
4
5
6
7
8
9
<html>
<head>
  ...
</head>
<body>  
  <div class="sticky-footer-fix"> ... Тут весь основной контент ... </div>
  <footer class="footer"> ... </footer>
</body>
</html>

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
html {
    height: 100%;
}
 
body {
    height: 100%;
    margin: 0;
}
 
.sticky-footer-fix {
    min-height: 100%;
}
    .sticky-footer-fix:after {
        content: '';
        display: table;
        height: 250px;
    }
 
.footer {
    height: 170px;
    padding-top: 50px;
    margin-top: -220px;
    color: #fff;
}

@morda77 · 21.06.2014, 19:14 **[ТС]**

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

3
4
5
6
7
8
9
<html>
<head>
* ...
</head>
<body>*
* <div class="sticky-footer-fix"> ... Тут весь основной контент ... </div>
* <foot

monochromer, Сделал исходя из этого образца.

Как-то так:

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>Тестовый шаблон</title>
</head>
 
        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS Bin</title>
 
  <body>
 
    <div class="fix">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
            <div id="header">
                <div class="header">
                <div class="col-sm-6">
                    <div class="logo"></div>
                </div>
                <div class="col-sm-6">
                    <div class="phone">
                      <ul>
                        <li>+7(499) 777-77-77</li>
                        <li>+7(499) 777-77-77</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
                    
        
            <!--Адаптивная навигация-->
     
     <!--Положение меню и выпадающее меню-->
       
          
             
                <div class="navbar navbar-inverse"> <!--(navbar-static-top) - Панель навигации снаружи контейнера, статичная-->
                <div class="container">
                   <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"><!--Адаптивная кнопка навигации-->
                     <span class="sr-only">Открыть навигацию</span><!--"sr-only" - видно только на устройствах "screen reader" - для слепых-->
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span><!--Черточки на ад        аптивной кнопке навигации-->
                       </button>
                       
                   <div class="class collapse navbar-collapse" id="responsive-menu"><!--Адаптивные пункты навигации-->
                       <ul class="nav navbar-nav">
                           <li><a href="#">Главная</a></li>
                           <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Каталог<b class="caret"><!--(b class="caret") - кнопка в виде треугольника--></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#">Пункт 1</a></li>
                               <li><a href="#">Пункт 2</a></li>
                               <li><a href="#">Пункт 3</a></li>
                               <li class="divider"></li><!--Разделитель (divider)-->
                               <li><a href="#">Пункт 4</a></li>
                           </ul>
                           </li>
                           <li><a href="#">Доставка и оплата</a></li>
                           <li><a href="#">Прайс-лист</a></li>
                           <li><a href="#">Контакты</a></li>
                       </ul>
                   </div>
                </div>      
             </div> 
            </div>
            
            
            <div class="slide">
            </div>
        
        <div class="container">
        <div class="col-sm-4">
            <div class="blok-1">
                <h1>Новости</h1>
                <br>
                <p>14 сентября 2013 г.
Редизайн веб-сайта архитектурного бюро.</p>   
        <br>                
<p>14 сентября 2013 г.
Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.</p>
<br>
<p>14 сентября 2013 г.
SEO-продвижение сайта поставщика дизель генераторов.</p>
                <br>        
<p>14 сентября 2013 г.
Поисковое продвижение веб-сайта поставщика гидрооборудования</p>
            <br>    
            <a href="#" class="arhiv_news">Архив новостей</a>
            </div>
        </div>
        <div class="col-sm-7 col-md-offset-1 col-sm-offset-1">
            <div class="blok-2">
            <h1>Компания «Пиксель Плюс»</h1>
 
<p>Компания «Пиксель Плюс» существует более 6 лет, за это время мы принимали участие в разработке более чем 700 сайтов, поэтому можем уверенно называть себя профессионалами. На данный момент наш коллектив состоит из более чем 30 сотрудников работающих в двух офисах в Москве и Зеленограде.</p>
 
<p>Одним из основных направлений работ нашей компании является поисковое продвижение сайтов, на данной момент мы работаем с более чем 150 постоянными клиентами по более чем 11 000 поисковым запросам. При этом в работе основной акцент мы делаем на качестве работ, а так же применяем собственные уникальные разработки в области SEO продвижения. На данный момент отдел SEO состоит из 9 человек под руководством ведущего специалиста, преимущественно работающих в нашем московском офисе.</p>
 
<p>Наша компания является золотым сертифицированным партнёром «1С-Битрикс» (сертификат № 33939 с 2007 по 2013), что ещё раз подтверждает квалификацию наших сотрудников. В январе 2013 мы стали лидерами продаж продуктов «1С-Битрикс» и вошли в число лучших разработчиков сайтов России. Все специалисты занимающиеся изготовлением сайтов проходят обязательную сертификацию «1С-Битрикс» в течении первых 6 месяцев работы в компании, после чего продолжают непрерывно поддерживать и развивать свои профессиональные навыки.</p>
        </div>
    </div>
</div>
 
</div>
    
        <div id="footer">
            <div class="footer">
                  <div class="name">    
                       <p>© 2012–2013 ЗАО «Компания»</p>  
                       <a href="#">info@name.ru</a>
                    </div>
                    <!--<div class="menu">
                       <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Каталог</a></li>
                            <li><a href="#">Доставка и оплата</a></li>
                            <li><a href="#">Прайс-лист</a></li>
                            <li><a href="#">Контакты</a></li>  
                       </ul>
                    </div>-->
                   
                </div>
            </div>
        
    </div>   
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
html{height: 100%;}
 
body{
    height: 100%;
    margin: 0;
    /*background-color: #fff;
    position: relative;
    min-height: 100%;*/
}
 
.container-fluid{
  border:2px solid #00a5f5;
  background-color: #fff;
}
 
.fix{
    /*padding: 0 0 50px 0;
    max-width: 100%;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;*/
    max-width: 100%;
    margin:0 auto;
    min-height:100%;
    position:relative;
}
 
/*
[class*='col-']
Означает выбор элементов, у которых атрибут class имеет подстроку col-.*/
 
[class*='col-'] {
  min-height: 50px;
  padding: 10px;  
  border: 0px solid #ffcf61;
}
 
 
/* Желательно стили колонкам вообще не задавать - они как контейнеры. Добавление чего-то еще (размеры, отступы) может только испортить верстку. Стили лучше задавать дочерним элементам. */
 
 
/*
[class*='col-']>* означает выбор всех непосредственных дочерних элементов внутри выборки [class*='col-'].
*/
 
[class*='col-']>* {
  text-align: center;
  background: #545454;
  color: #fff;
  height: 108px;
  border: 0px solid #57f9ff;
}
 
#header{
    background: #DCDCDC;
    height: 230px;
    border: 2px solid #57f9ff;
    padding: 40px;
    font-size: 24px;
    margin-bottom: 0px;
}
 
@media screen and (max-width: 768px){
#header{
        height: 300px;
      }
}
 
@media screen and (max-width: 400px){
#header{
        height: 470px;
      }
}
 
.header{
    max-width: 1110px;
    position: relative;
    height: 220px;
    margin:0 auto
}
 
.logo{
    background: #DCDCDC;
    background-image:url(../img/logo.png);
    background-repeat: no-repeat;
    /*width: 273px;*/
    height: 100px;    
    border: 0px solid #57f9ff;
}
 
 
.phone{
    background: #DCDCDC;
    /*width: 273px;*/
    height: 100px;
    border: 0px solid #57f9ff;
    color:#777777;
}
 
a{
    color: #fff;
}
 
a:hover{
    color: #fff;
}
 
li{
    list-style: none;/*Убираем маркеры в списках*/
}
 
.navbar{
    margin: -10px;
}
 
 
.slide{
    background-image:url(../img/slide.png);
    height: 400px;
    max-width:100%;
    /*Выровнять изображение по центру и добавить отступ снизу.*/
    margin:0 auto 30px auto;
    display:block;
}
 
@media(min-width:200px){ /*Изменения будут внесены только для шаблона шириной свыше 400px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
 
@media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
  }  
 
 
.blok-1{
    height: 560px;
    background-color:#767676;
    color: #fff;
    text-align: left;
    padding: 20px 40px 40px;
}
 
.arhiv_news{
    margin-left: 150px
}
 
.blok-2{
    height: 560px;
    background-color:#fff;
    color: #767676;
    text-align: left;
    padding: 20px 40px 40px;
}
 
#footer{
    /*height: 220px;
    margin-top: 200px;
    outline: 1px solid #00FF00;*/
    background-color: #767676;
    Прижимаем футер книзу страницы окна браузера
    
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    /*left: 0;*/
    height: 170px;
    /*padding-top: 50px;*/
    /*margin-top: -220px;*/
    color: #fff;
}
 
 
.footer{
    /*height: 220px;*/
    max-width: 1150px;
    bottom:0;
    outline: 1px solid #00FF00;
    margin: 0 auto;
    background-color: #767676;
    height: 170px;/*
    padding-top: 50px;*/
   /* margin-top: -220px;*/
    color: #fff;
}
 
.name{
    max-width: 210px;
    margin: 50px 20px;
    text-align: left;
}
 
.menu{
    max-width: 210px;
    margin: 50px 0px;
    text-align: left;
}

Футер уже не наезжает на блоки, что лежат выше, но при уменьшении масштаба отрывается от низа страницы.

@monochromer · 21.06.2014, 20:15

Ощущение, что Вы игнорируете все, что тут писали.

Обратите внимание еще раз на структуру HTML.

1. Есть два блока - один с контентом (пусть будет .fix). Другой - прижимаемый футер - .footer.

Они следуют так:

HTML5
1
2
3
4
5
6
7
8
<body>
  <div class="fix">
  </div>
 
  <footer class="footer">
  </footer>
 
</body>

2. .footer должен иметь фиксированную высоту и иметь отрицательный margin-top на величину своей высоты.

.fix имеет свойство min-height: 100%, а все его родительские элементы (в данном случае body, html) должный иметь height: 100%;

3. Далее чтобы футер не налазил на контент в .fix, нужно сделать распорку между ними. В моем примере - это псевдоэлемент в конце .fix. Также это можно сделать с помощью padding-top у .fix. Но для этого нужно задать ему свойство box-sizing: border-box (лучше с префиксами). Или вложить в .fix еще один блок с таким padding'ом. Величина padding должны быть равна или больше, чем высота футера.

И еще ...

HTML5
1
2
<div id="footer">
            <div class="footer"> ...

Это зло. Придумывайте названия, например, так footer и footer__inner

@morda77 · 22.06.2014, 03:32 **[ТС]**

monochromer, это потому, что я балда, думал, что fix должен вмещать в себя и футер, а не являться, по отношению к нему, отдельным блоком.
В общем, как-то так:

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>Тестовый шаблон</title>
</head>
 
        
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS Bin</title>
 
  <body>
 
    <div class="fix">
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
            <div id="header">
                <div class="header">
                <div class="col-sm-6">
                    <div class="logo"></div>
                </div>
                <div class="col-sm-6">
                    <div class="phone">
                      <ul>
                        <li>+7(499) 777-77-77</li>
                        <li>+7(499) 777-77-77</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
                    
        
            <!--Адаптивная навигация-->
     
     <!--Положение меню и выпадающее меню-->
       
          
             
                <div class="navbar navbar-inverse"> <!--(navbar-static-top) - Панель навигации снаружи контейнера, статичная-->
                <div class="container">
                   <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"><!--Адаптивная кнопка навигации-->
                     <span class="sr-only">Открыть навигацию</span><!--"sr-only" - видно только на устройствах "screen reader" - для слепых-->
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span><!--Черточки на ад        аптивной кнопке навигации-->
                       </button>
                       
                   <div class="class collapse navbar-collapse" id="responsive-menu"><!--Адаптивные пункты навигации-->
                       <ul class="nav navbar-nav">
                           <li><a href="#">Главная</a></li>
                           <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Каталог<b class="caret"><!--(b class="caret") - кнопка в виде треугольника--></b></a>
                           <ul class="dropdown-menu">
                               <li><a href="#">Пункт 1</a></li>
                               <li><a href="#">Пункт 2</a></li>
                               <li><a href="#">Пункт 3</a></li>
                               <li class="divider"></li><!--Разделитель (divider)-->
                               <li><a href="#">Пункт 4</a></li>
                           </ul>
                           </li>
                           <li><a href="#">Доставка и оплата</a></li>
                           <li><a href="#">Прайс-лист</a></li>
                           <li><a href="#">Контакты</a></li>
                       </ul>
                   </div>
                </div>      
             </div> 
            </div>
            
            
            <div class="slide">
            </div>
        
        <div class="container">
        <div class="col-sm-4">
            <div class="blok-1">
                <h1>Новости</h1>
                <br>
                <p>14 сентября 2013 г.
Редизайн веб-сайта архитектурного бюро.</p>   
        <br>                
<p>14 сентября 2013 г.
Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.</p>
<br>
<p>14 сентября 2013 г.
SEO-продвижение сайта поставщика дизель генераторов.</p>
                <br>        
<p>14 сентября 2013 г.
Поисковое продвижение веб-сайта поставщика гидрооборудования</p>
            <br>    
            <a href="#" class="arhiv_news">Архив новостей</a>
            </div>
        </div>
        <div class="col-sm-7 col-md-offset-1 col-sm-offset-1">
            <div class="blok-2">
            <h1>Компания «Пиксель Плюс»</h1>
 
<p>Компания «Пиксель Плюс» существует более 6 лет, за это время мы принимали участие в разработке более чем 700 сайтов, поэтому можем уверенно называть себя профессионалами. На данный момент наш коллектив состоит из более чем 30 сотрудников работающих в двух офисах в Москве и Зеленограде.</p>
 
<p>Одним из основных направлений работ нашей компании является поисковое продвижение сайтов, на данной момент мы работаем с более чем 150 постоянными клиентами по более чем 11 000 поисковым запросам. При этом в работе основной акцент мы делаем на качестве работ, а так же применяем собственные уникальные разработки в области SEO продвижения. На данный момент отдел SEO состоит из 9 человек под руководством ведущего специалиста, преимущественно работающих в нашем московском офисе.</p>
 
<p>Наша компания является золотым сертифицированным партнёром «1С-Битрикс» (сертификат № 33939 с 2007 по 2013), что ещё раз подтверждает квалификацию наших сотрудников. В январе 2013 мы стали лидерами продаж продуктов «1С-Битрикс» и вошли в число лучших разработчиков сайтов России. Все специалисты занимающиеся изготовлением сайтов проходят обязательную сертификацию «1С-Битрикс» в течении первых 6 месяцев работы в компании, после чего продолжают непрерывно поддерживать и развивать свои профессиональные навыки.</p>
        </div>
    </div>
</div>
 
</div>
    </div>
        <div class="footer_inner">
            <div class="footer">
                  <div class="name">    
                       <p>© 2012–2013 ЗАО «Компания»</p>  
                       <a href="#">info@name.ru</a>
                    </div>
                    <!--<div class="menu">
                       <ul>
                            <li><a href="#">Главная</a></li>
                            <li><a href="#">Каталог</a></li>
                            <li><a href="#">Доставка и оплата</a></li>
                            <li><a href="#">Прайс-лист</a></li>
                            <li><a href="#">Контакты</a></li>  
                       </ul>
                    </div>-->
                   
                </div>
            </div>
  
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
html{height: 100%;}
 
body{
    height: 100%;
    margin: 0;
    /*background-color: #fff;
    position: relative;
    min-height: 100%;*/
}
 
.container-fluid{
  border:2px solid #00a5f5;
  background-color: #fff;
}
 
.fix{
    /*padding: 0 0 50px 0;
    max-width: 100%;
    margin:0 auto;
    min-height:100%;
    background-color:#FFFFFF;
    position:relative;
    outline: 1px solid #000000;*/
    max-width: 100%;
    margin:0 auto;
    min-height:100%;
    position:relative;
}
 
/*
[class*='col-']
Означает выбор элементов, у которых атрибут class имеет подстроку col-.*/
 
[class*='col-'] {
  min-height: 50px;
  padding: 10px;  
  border: 0px solid #ffcf61;
}
 
 
/* Желательно стили колонкам вообще не задавать - они как контейнеры. Добавление чего-то еще (размеры, отступы) может только испортить верстку. Стили лучше задавать дочерним элементам. */
 
 
/*
[class*='col-']>* означает выбор всех непосредственных дочерних элементов внутри выборки [class*='col-'].
*/
 
[class*='col-']>* {
  text-align: center;
  background: #545454;
  color: #fff;
  height: 108px;
  border: 0px solid #57f9ff;
}
 
#header{
    background: #DCDCDC;
    height: 230px;
    border: 2px solid #57f9ff;
    padding: 40px;
    font-size: 24px;
    margin-bottom: 0px;
}
 
@media screen and (max-width: 768px){
#header{
        height: 300px;
      }
}
 
@media screen and (max-width: 400px){
#header{
        height: 470px;
      }
}
 
.header{
    max-width: 1110px;
    position: relative;
    height: 220px;
    margin:0 auto
}
 
.logo{
    background: #DCDCDC;
    background-image:url(../img/logo.png);
    background-repeat: no-repeat;
    /*width: 273px;*/
    height: 100px;    
    border: 0px solid #57f9ff;
}
 
 
.phone{
    background: #DCDCDC;
    /*width: 273px;*/
    height: 100px;
    border: 0px solid #57f9ff;
    color:#777777;
}
 
a{
    color: #fff;
}
 
a:hover{
    color: #fff;
}
 
li{
    list-style: none;/*Убираем маркеры в списках*/
}
 
.navbar{
    margin: -10px;
}
 
 
.slide{
    background-image:url(../img/slide.png);
    height: 400px;
    max-width:100%;
    /*Выровнять изображение по центру и добавить отступ снизу.*/
    margin:0 auto 30px auto;
    display:block;
}
 
@media(min-width:200px){ /*Изменения будут внесены только для шаблона шириной свыше 400px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
 
@media(min-width:768px){ /*Изменения будут внесены только для шаблона шириной свыше 767px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:992px){/*Изменения будут внесены только для шаблона шириной свыше 992px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
}
@media(min-width:1200px){/*Изменения будут внесены только для шаблона шириной свыше 1200px*/
    .slide{
        background:url(../img/slide.png) center center no-repeat;
        height:400px;
    }
  }  
 
 
.blok-1{
    height: 560px;
    background-color:#767676;
    color: #fff;
    text-align: left;
    padding: 20px 40px 40px;
}
 
.arhiv_news{
    margin-left: 150px
}
 
.blok-2{
    height: 560px;
    background-color:#fff;
    color: #767676;
    text-align: left;
    padding: 20px 40px 40px;
}
 
.footer_inner{
    /*height: 220px;
    margin-top: 200px;
    outline: 1px solid #00FF00;*/
    background-color: #767676;
    Прижимаем футер книзу страницы окна браузера
    
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    /*left: 0;*/
    height: 170px;
    /*padding-top: 50px;*/
    /*margin-top: -220px;*/
    color: #fff;
}
 
 
.footer{
    position: relative;
    /*height: 220px;*/
    max-width: 1150px;
    bottom:0;
    outline: 1px solid #00FF00;
    margin: 0 auto;
    background-color: #767676;
    height: 170px;/*
    padding-top: 50px;*/
   /* margin-top: -220px;*/
    color: #fff;
}
 
.name{
    position: relative;
    max-width: 210px;
    margin: 50px auto;
    text-align: left;
}
 
.menu{
    max-width: 210px;
    margin: 50px 0px;
    text-align: left;
}

Теперь не понимаю, почему у меня, при задании верхнего отступа (margin) классу name, отступ появляется у его родителя - класса footer.
Не ткнете носом в ошибку?)

Новые блоги и статьи Все статьи Все блоги /
Семь 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. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера 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. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,713
	18.06.2014, 05:59 [ТС]
	mihalken, не то. Футер хоть и прижат книзу, но живет отдельно от других блоков, на них наезжая при скролинге. Типа, прибит к экрану в одном месте. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,713
	19.06.2014, 03:06 [ТС]
	Mr Coder, сделал. Не прижимается. 0

@shmonoff 1 / 1 / 2 Регистрация: 07.04.2013 Сообщений: 41
	19.06.2014, 10:08
	попробуй прописать body {width:100%; height:100%;} 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,713
	19.06.2014, 13:24 [ТС]
	shmonoff, вообще никакой разницы. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	20.06.2014, 10:02
	.footer должен быть на одном уровне с .fix. Зачем помещать футер в col-sm-12. Это и так блочный элемент и он будет на всю ширину родителя. Тем более что он и мешает применить технику прижатия футера. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,713
	20.06.2014, 11:19 [ТС]
	monochromer, ."footer должен быть на одном уровне с .fix." - Вы имеете в виду, внутри одного блока? 0

Bootstrap 3. Прижать футер книзу страницы

Решение