Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
#1

Прижать футер к низу - HTML, CSS

10.05.2016, 22:52. Просмотров 422. Ответов 6
Метки нет (Все метки)

Всем привет, помогите прижать футер к низу подвала, смотрел я разные технику пробую но всё равно не то..

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav">
            <a class="blog-nav-item active" href="/">Home</a>
                        <a class="blog-nav-item" href="/notifications">Notifications</a>
            <a class="blog-nav-item" href="/logout">Logout</a>
                    </nav>
    </div>
</div>        
    
    <div class="container main-block">
 
        
            <section>
                <span>You logged in system if want logout push <a href="/logout">here</a></span>
            </section>
 
</div>
    <div class="h-footer"></div>
<div class="blog-footer">
    <p>2016</p>
    <p><a class="back-to-top" href="#">Back to top</a></p>
</div>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.05.2016, 22:52
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Прижать футер к низу (HTML, CSS):

Прижать футер к низу
В общем не удаётся прижать футер к низу страницы. Похожие темы и ресурсы...

Как прижать футер к низу?
У меня есть два блока, как под ними расположить footer, чтобы он был не...

Прижать футер к низу страницы
здравствуйте! Учусь делать сайт на Wordpress. В процессе возникла такая...

Прижать футер к низу контента
Помогите пожалуйста прижать футер к низу контента. Вот сам сайт...

Прижать футер к низу страницы
Сделал блок с выпадающей информацией. Все бы хорошо, но почему-то с первого по...

Прижать футер к низу страницы
Всем привет с вёрсткой плохо.Подскажите как прижать футер к низу траницы. Всем...

6
sad67man
664 / 542 / 335
Регистрация: 23.08.2015
Сообщений: 1,326
10.05.2016, 23:21 #2
Посмотрел один сайт, как делал наш верстальщик. Допустим, что футер в высоту 100px;
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
<div class="site">
<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav">
            <a class="blog-nav-item active" href="/">Home</a>
                        <a class="blog-nav-item" href="/notifications">Notifications</a>
            <a class="blog-nav-item" href="/logout">Logout</a>
                    </nav>
    </div>
</div>        
    
    <div class="container main-block">
 
        
            <section>
                <span>You logged in system if want logout push <a href="/logout">here</a></span>
            </section>
 
</div>
    <div class="h-footer"></div>
</div>
<div class="blog-footer">
    <p>2016</p>
    <p><a class="back-to-top" href="#">Back to top</a></p>
</div>
CSS
1
2
.site{min-height:100%}
    .blog-footer{height:100px; margin-top: -100px}
Добавлено через 1 минуту
Т.е. обрамляем сайт дивом, кроме футера и задаем css свойство min-height:100%, А футеру прописываем margin-top: -100px; Вместо 100px, указываем свою высоту футера.

Добавлено через 8 минут
Упустил один момент. Этого не достаточно, нужен еще 1 див внутри обрамляющего дива с padding-bottom: 100px (высота футера), чтоб футер не налезал на контент

Добавлено через 3 минуты
Т.е. окончательный вариант будет что-то типо такого
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
<div class="site">
    <div class="wrap">
        <div class="blog-masthead">
            <div class="container">
                <nav class="blog-nav">
                    <a class="blog-nav-item active" href="/">Home</a>
                        <a class="blog-nav-item" href="/notifications">Notifications</a>
                    <a class="blog-nav-item" href="/logout">Logout</a>
                </nav>
            </div>
        </div>        
            
        <div class="container main-block">
            <section>
                <span>You logged in system if want logout push <a href="/logout">here</a></span>
            </section>
        </div>
        <div class="h-footer"></div>
    </div>
</div>
<footer>
    <p>2016</p>
    <p><a class="back-to-top" href="#">Back to top</a></p>
</footer>
CSS
1
2
3
.wrap{padding-bottom:100px;overflow:hidden;}
.site{min-height:100%;overflow:hidden;}
footer{height:100px; margin-top: -100px; overflow:hidden;}
1
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
10.05.2016, 23:24  [ТС] #3
sad67man, Спасибо завтро попробую применить
0
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
12.05.2016, 12:50  [ТС] #4
sad67man, всё равно не очень этот вариант проходит возможно наглядно посмотрев понятней будет вот сам сайт сайт
0
sad67man
664 / 542 / 335
Регистрация: 23.08.2015
Сообщений: 1,326
12.05.2016, 13:21 #5
sendxt,
Внесите такие корректировки
CSS
1
2
html{height:100%}
.wrap {padding-bottom: 140px;}
И удалите блок .h-footer

Добавлено через 13 минут
И еще добавьте
CSS
1
.blog-footer{position:relative}
1
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
12.05.2016, 13:29  [ТС] #6
sad67man, сработало круто
0
ttsergey
0 / 0 / 0
Регистрация: 13.05.2016
Сообщений: 6
13.05.2016, 03:07 #7
Посмотрите как это делает генератор.
Там есть опция прижать футер к низу
http://csstemplater.com/
0
13.05.2016, 03:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.05.2016, 03:07
Привет! Вот еще темы с решениями:

Как прижать футер к низу )
Будуууу оооченььь признателен!:) Если кто то мне подскажет ) как это сделать)))...

Прижать футер к низу страницы
Здравствуйте. Есть футер: &lt;div id=&quot;footer&quot;&gt; &lt;div class=&quot;shell&quot;&gt; &lt;span...

Прижать футер к низу страницы
Добрый вечер! Прошу вашей помощи.Как исправить футер и прибить его к низу? ...

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


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

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

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