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.
Не ткнете носом в ошибку?)

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

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

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

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

Решение