Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Serega187
16 / 16 / 5
Регистрация: 08.01.2015
Сообщений: 134
1

Прижатый к низу футер и одинаковые колонки на всю область видимости

13.05.2017, 18:07. Просмотров 340. Ответов 8
Метки нет (Все метки)

Привет, ребята! Нужно сделать прижатый к низу футер и колонки одинаковой высоты на всю область видимости, имея данный код:
PHP/HTML
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
<body>
    <div class="wrapper">
        <div class="wrapper-content">
            <header>
                <div class="block-content">
                    HEADER-CONTENT
                </div>
            </header>
            <div class="rasporka"></div>
            <div class="table-block block-content">
                <section>
                   <div class="content">
                       TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                   </div>
                </section>
                <aside>
                    <div class="right-block">
                        RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
                    </div>
                </aside>
            </div>
            <footer>
                <div class="block-content">
                    FOOTER
                </div>
            </footer>        
        </div>
 
    </div>
</body>
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
*{
    margin: 0;
    padding: 0;
}
body{
    background: #0e0e0e;
    color: #fff;
}
.wrapper-content{
    background: #171715;
    max-width: 1400px;
    margin: 0 auto;    
}
header{
    background: #000;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.rasporka{
    height: 100px;
}
.block-content{
    max-width: 1165px;
    margin: 0 auto;   
}
.table-block{
    display: table;
    width: 100%;
}
section{
    background: #0e0e0e;
    height: 500px;
    display: table-cell;
}
aside{
    background: #0e0e0e;
    display: table-cell;
}
footer{
    background: #000;
    height: 100px;
}
Колонки выровнял таблицей, т.к можно задать одинаковый цвет фона в них и одинаковый размер при заполнении. Сделать отдельно прижатый футер я могу, а вот все вместе не получается.
Или в таких случаях без JS не обойтись?
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.05.2017, 18:07
Ответы с готовыми решениями:

Градиент на всю высоту сайта и прижатый к низу футер
Всем привет. Столкнулся с проблемой при задании body в качестве фона градиента. Все было хорошо...

2 колонки на всю высоту и прижатый книзу футер
Необходимо реализовать такую конструкцию &lt;div id=&quot;container&quot;&gt; &lt;div id=&quot;main&quot;&gt; &lt;div...

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

Футер прижатый к низу, наезжает на текст
Здравствуйте, делаю сайт на котором не все страницы длинные, есть небольшие и футер висел в...

Прижатый футер
Здравствуйте!Перепробывал много способов которые есть в интернете чтобы прижать футер к низу...

8
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1820 / 1088 / 524
Регистрация: 16.04.2016
Сообщений: 2,908
Завершенные тесты: 2
14.05.2017, 12:55 2
Serega187, потому что у вас футер в блоке
Цитата Сообщение от Serega187 Посмотреть сообщение
<div class="wrapper-content">
Вынесите футер за пределы этого блока и повторите попытку.

Добавлено через 16 минут
Точнее не
<div class="wrapper-content">
а
Цитата Сообщение от Serega187 Посмотреть сообщение
<div class="wrapper">
Почему вы не захотели воспользоваться стандартной разметкой HTML5? Зачем оборачивать теги сделанные в новом стандарте для шапки, футера в дивы. Вот стандартная разметка
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
<!DOCTYPE HTML>
<html lang="ru">
<head>
    <!-- Подключаемые файлы, метатеги, название страницы -->
    <meta charset="utf-8"> <!-- Кодировка страницы-->
    <title>Название страницы</title>
</head>
<body>
    <!-- Тело сайта, отвечает за вывод на страницу-->
    
      <header>
        <!-- Шапка сайта-->
     <--можете пихать дивы-->
    </header>
 
  <--можете пихать дивы-->
 
    <nav>
       <!-- Навигация -->
       <--можете пихать дивы-->
    </nav>
 
       <--можете пихать дивы-->
 
    <footer>
     <!-- Подвал сайта-->
       <--можете пихать дивы-->
    </footer>
</body>
</html>
Добавлено через 17 минут
а по вашему коду
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
<div class="wrapper">
        <div class="wrapper-content">
            <header>
                <div class="block-content">
                    HEADER-CONTENT
                </div>
            </header>
            <div class="rasporka"></div>
            <div class="table-block block-content">
                <section>
                   <div class="content">
                       TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
                   </div>
                </section>
                <aside>
                    <div class="right-block">
                        RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
                    </div>
                </aside>
            </div>
                    
        </div>
 
    </div>
    <footer>
                <div class="block-content">
                    FOOTER
                </div>
            </footer>
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
*{
    margin: 0;
    padding: 0;
}
body{
    background: #0e0e0e;
    color: #fff;
}
.wrapper-content{
    background: #171715;
    max-width: 1400px;
    margin:  auto;    
}
header{
    background: #000;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.rasporka{
    height: 100px;
}
.block-content{
          
}
.table-block{
    display: table;
    width: 100%;
}
section{
    background: #0e0e0e;
    height: 500px;
    display: table-cell;
}
aside{
    background: #0e0e0e;
    display: table-cell;
}
footer{
  position: fixed;
 bottom: 0;
 width: 100%;
    background: #000;
    z-index:99;
}
0
Serega187
16 / 16 / 5
Регистрация: 08.01.2015
Сообщений: 134
14.05.2017, 13:00  [ТС] 3
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Почему вы не захотели воспользоваться стандартной разметкой HTML5?
эта разметка нужна была для прижатого к низу футера.
Для моего случая нет решения без JS, ну я не нашел, только по отдельности или прижатый футер или колонки одинаковой длины. А флексы не подходят нужен IE9.
0
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1820 / 1088 / 524
Регистрация: 16.04.2016
Сообщений: 2,908
Завершенные тесты: 2
14.05.2017, 13:14 4
Serega187, вот же дал вам код без JS

Добавлено через 4 минуты
Цитата Сообщение от Serega187 Посмотреть сообщение
колонки одинаковой длины
почитайте о
CSS
1
overflow-y
0
Serega187
16 / 16 / 5
Регистрация: 08.01.2015
Сообщений: 134
14.05.2017, 13:27  [ТС] 5
Это маленько не-то, нужно чтобы блоки section и aside были во-первых одинаковые по высоте (это сделано), во-вторых были растянуты на всю область просмотра браузера, т.к у них будет другой цвет фона. Вот такая фигня нужна
0
Миниатюры
Прижатый к низу футер и одинаковые колонки на всю область видимости  
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1820 / 1088 / 524
Регистрация: 16.04.2016
Сообщений: 2,908
Завершенные тесты: 2
14.05.2017, 13:41 6
Serega187,
Цитата Сообщение от Serega187 Посмотреть сообщение
или прижатый футер или колонки одинаковой длины
ошибаестесь!!! Песочница
HTML5
1
2
3
4
5
6
7
8
9
<table>
<tr>
  <td>bla-bla-bla</td>
  <td>bla-bla-bla</td>
</tr>
</table>
<footer>
  FOOTER
</footer>
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
*{    margin: 0;
    padding: 0;}
tr, td{
  border:1px solid red;  
}
table,tr{
  width:100%;
}
td:nth-child(1){
  width:70%;
  height:1000px;
}
td:nth-child(2){
  width:30%;
  height:1000px;
}
 
footer{
  position: fixed;  
  bottom: 0;
  width: 100%;
  background: black;
  color:white;
  z-index:99;
}
Добавлено через 42 секунды
Цитата Сообщение от Serega187 Посмотреть сообщение
Вот такая фигня нужна
смотрим в песочницу
0
mrtoxas
Модератор
Эксперт HTML/CSS
2669 / 1974 / 1218
Регистрация: 12.07.2015
Сообщений: 5,271
Записей в блоге: 3
14.05.2017, 16:00 7
Qwerty_Wasd, это не прижатый футер, а зафиксированный.
Serega187, в ie9 сейчас возможности проверить нет, поэтому, проверяйте сами:
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
<!DOCTYPE html>
<html lang="ru">
 
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html,
    body {
      height: 100%;
    }
    
    .wrapper {
      width: 100%;
      height: 100%;
      border-collapse: collapse;
    }
    
    .content {
      vertical-align: top;
      height: 100%;
      background-color: red;
    }
    
    .column1 {
      float: left;
      width: 30%;
      height: 100%;
      background-color: green;
    }
    
    .column2 {
      float: left;
      width: 70%;
      height: 100%;
      background-color: blue;
    }
    
    .footer {
      height: 50px;
      background-color: tomato;
    }
  </style>
</head>
 
<body>
  <table class="wrapper">
    <tr>
      <td class="content">
        <div class="column1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus error natus obcaecati, quo est, perferendis odio fugiat nisi eligendi, eveniet officiis sunt necessitatibus mollitia rerum reiciendis. Id accusamus illo facilis.</div>
        <div class="column2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas doloribus beatae odio iusto, adipisci nihil obcaecati, id praesentium hic eius non sapiente rerum delectus error! Atque, illo. Eligendi, doloremque, voluptas?</div>
      </td>
    </tr>
    <tr>
      <td class="footer">Footer</td>
    </tr>
  </table>
</body>
 
</html>
1
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1820 / 1088 / 524
Регистрация: 16.04.2016
Сообщений: 2,908
Завершенные тесты: 2
14.05.2017, 20:18 8
mrtoxas, согласен. Но как показывает практика, когда я вижу или слышу словосочетание "прижатый футер" - юзверь оказывается просит именно то что я сделал. Я просто сокращаю теперь басню )))
0
Serega187
16 / 16 / 5
Регистрация: 08.01.2015
Сообщений: 134
15.05.2017, 07:58  [ТС] 9
mrtoxas, именно так и должно выглядеть. В IE9 все равно появляется прокрутка на высоту футера. Говорят верстать таблицей не хорошо уже в нынешнее время. Ладно, всем спасибо.
0
15.05.2017, 07:58
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.05.2017, 07:58

Прижатый футер и его последствия
Всем доброго времени суток. Изначально столкнулся с проблемой: нужно прибить футер к низу. Проблема...

Прижатый футер и меню вылазит за его пределы
Добрый день. Прижал футер http://dimox.name/press_footer_bottom_with_css/ вторым способом. Проблема...

Футер не крепится к низу
Перерыл весь гугл))) нечего не помогает, может кто сталкивался не как футер не прижемается в низу...


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

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

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