Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.79/19: Рейтинг темы: голосов - 19, средняя оценка - 4.79
0 / 0 / 0
Регистрация: 03.07.2015
Сообщений: 1
1

Footer всегда внизу после последней формы

11.06.2013, 19:34. Показов 3361. Ответов 3
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте, требуется помощь. Делаем сайт под браузерную игру => в нее могут играть как люди, у которых большие мониторы, так и люди, у которых нетбуки - мелкомониторные. Требуется возникла проблема с футером.

Footer всегда внизу после последней формы


Нужно сделать так, чтобы футер всегда был внизу, на пикселей 10-20 после последней формы, картинки и т.д. Сейчас в CSS вот такая ситуация:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            footer{
                margin: 20px auto 0 auto;
 
                background-color: rgba(0,0,0,0.7);
                box-shadow: 0 0 12px 4px #000;
                
                width: 100%;
                height: 35px;
                line-height: 35px; 
 
                text-align: center;
                color: white;
                
                position: fixed;
                bottom: 0;
            }
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 11.06.2013, 19:34
Ответы с готовыми решениями:

Почему footer находиться не внизу?
Почему footer находиться не внизу? это возникает почему-то из-за таблицы, есть идеи как это...

Закрепить footer внизу страницы
Имеется страница, которая состоит из верхней панели + меню, по боксу справа и слева и основной...

Footer не держится в самом внизу
Здравствуйте, проблема такая, когда есть информация на сайте, футер как положено внизу, но когда...

Фиксированный Footer внизу экрана в RecyclerView
Как добавить фиксированный Footer в RecyclerView, чтобы скрол списка не влиял на этот Footer(то...

3
562 / 339 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
11.06.2013, 20:05 2
position: fixed; - для чего это?
Футер и так будет автоматически прижиматься к верхнему блоку. Вам лишь нужно настроить отступ от этого блока.
Представьте HTML код.
0
0 / 0 / 0
Регистрация: 03.07.2015
Сообщений: 1
11.06.2013, 20:11 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
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

<span id="block" name="block" class="block">
<!doctype html>
<html>
    <head>
    <!--[if IE 6]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
<!--[if IE 7]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
<!--[if IE 8]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="icon" href="../images/favicon.ico" type="../images/favicon.ico">
    <link rel="shortcut icon" href="../images/favicon.ico" type="../images/favicon.ico">
        <meta charset="utf-8">
        <title>Age of Revolution</title>
        <link rel="stylesheet" type="text/css" href="../css/main.css?<?=rand(1,100)?>">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="../js/main.js"></script>
    </head>
    <body>
        <nav>
            <li onclick='$.ajax({ url: "index.php/",cache: false,success: function(html){$("#block").html(html); } }); document.location ="/"'>Главная</li>
            <li onclick='document.location.href="/dummy"'>Кукла</li>
    
        </nav>
        <div id="content">
            <div class="banner" >
            <a href="http://vk.com/age_of_revolution">
            <img src="https://www.cyberforum.ru/images/ban01.jpg" alt="banner"  width="100%" height="100%">
    </a>
            </div>
            <div class="container" name="container" id="container" >
            </div>
            <div id="rightBlock" class="rightBlock" align="center">
            <form name="logForm" id="logForm">
            <div id="formDiv">
            <label class="labText"><input placeholder="Логин" class="logEdit" name="logEdit" id="logEdit" type="text" ><div class="reg-field-error-info-main"></div></label>
 <label class="labText" id="labText"><input placeholder="Пароль" class="logEdit" name="password" type="password" id="password"><div class="reg-field-error-info-main"></div></label>
        <input name="enterBut" id="butEnter" type="button" value="Войти" >
        <input onclick='
    window.history.pushState("bject or string", "Title", "/register");
    $.ajax({ url: "/register",cache: false,success: function(html){$("#container").html(html); } });' name="registryBut" id="butRegistry" type="button" value="Регистрация" >
        <a class="forgotPass" onclick="dev.aor-game.ru/forgot/">Забыли пароль?</a>
        </div>
            </form>
            </div>
        </div>
        <footer>©2013 - Age of Revolution</footer>
    </body>
</html>
</span>
Это полный HTML код главной страницы
0
Нарушитель
86 / 86 / 9
Регистрация: 09.05.2012
Сообщений: 456
11.06.2013, 20:45 4
о боже что за мясо...
вы тэг <footer> используете специально, что бы в ie 7 и 8 не работало ?

вот так прибивается ваш footer:
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

<!doctype html>
<html>
    <head>
    <!--[if IE 6]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
<!--[if IE 7]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
<!--[if IE 8]> 
<script type="text/javascript">window.location.href = "ie.php";</script>
<![endif]-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="icon" href="../images/favicon.ico" type="../images/favicon.ico">
    <link rel="shortcut icon" href="../images/favicon.ico" type="../images/favicon.ico">
        <meta charset="utf-8">
        <title>Age of Revolution</title>
        <link rel="stylesheet" type="text/css" href="../css/main.css?<?=rand(1,100)?>">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="../js/main.js"></script>
            
    </head>
    <body>
        <div id="wrapper">
        <nav>
            <li onclick='$.ajax({ url: "index.php/",cache: false,success: function(html){$("#block").html(html); } }); document.location ="/"'>Главная</li>
            <li onclick='document.location.href="/dummy"'>Кукла</li>
    
        </nav>
        <div id="content">
            <div class="banner" >
            <a href="http://vk.com/age_of_revolution">
            <img src="https://www.cyberforum.ru/images/ban01.jpg" alt="banner"  width="100%" height="100%">
    </a>
            </div>
            <div class="container" name="container" id="container" >
            </div>
            <div id="rightBlock" class="rightBlock" align="center">
            <form name="logForm" id="logForm">
            <div id="formDiv">
            <label class="labText"><input placeholder="Логин" class="logEdit" name="logEdit" id="logEdit" type="text" ><div class="reg-field-error-info-main"></div></label>
 <label class="labText" id="labText"><input placeholder="Пароль" class="logEdit" name="password" type="password" id="password"><div class="reg-field-error-info-main"></div></label>
        <input name="enterBut" id="butEnter" type="button" value="Войти" >
        <input onclick='
    window.history.pushState("bject or string", "Title", "/register");
    $.ajax({ url: "/register",cache: false,success: function(html){$("#container").html(html); } });' name="registryBut" id="butRegistry" type="button" value="Регистрация" >
        <a class="forgotPass" onclick="dev.aor-game.ru/forgot/">Забыли пароль?</a>
        </div>
            </form>
            </div>
        </div>
          <div id="rasp"></div>
      </div>
        <footer>©2013 - Age of Revolution</footer>
    </body>
</html>
CSS
1
2
3
4

body,html {height:100%; min-height:100%;}
#wrapper {min-height:100%; margin:0 auto -40px;}
#rasp {height:40px;}
footer {height:20px; margin-top:20px;}
0
11.06.2013, 20:45
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 11.06.2013, 20:45
Помогаю со студенческими работами здесь

Footer внизу страницы (нетривиальный вариант)
Добрый вечер! Не могу никак додуматься, как грамотней решить проблему... Бьюс не первый час. В чем...

Помогите удержать footer внизу страницы!
Я знаю, что инструкции по моему вопросу есть на каждом углу, но мне попался тут один шаблон, никак...

После скрытия формы пропадает значок приложения внизу
Здравствуйте! Скомпилировав проект, через какое-то время работы с Form1 мне нужно её скрыть, чтобы...

Sidebar и footer сайта находятся слева а не справа и внизу
Добрый день! Помогите советом. Делаю верстку сайта по образцу - сверил с исходником - все...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru