Футер

@makich_ · Регистрация: 07.09.2020

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

Подскажите, пожалуйста, как правильно создать такой футер?

@aleks2my3lop · 19.02.2022, 03:22

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
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css.css">
</head>
<body>
 
<div id="page">
 
<div id="header">
</div>
 
<div id="center">
</div>
 
<div id="footer">
<div id="p_text">
<div id="p_text_1">Тема для тренировки CSS</div><div id="p_text_2">math.isu.ru</div>
</div>
</div>
 
</div>
 
</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
body{
width:99%;
}
#page{
width:1200px;
margin:0px auto;
}
#header{
width:95%;
}
#center{
width:95%;
}
#footer{
width:95%;
background-color:black;
text-align:center;
float:left;
heigh:80px;
}
#p_text{
margin:0 auto;
heigh:40px;
}
#p_text_1{
float:left;
color:white;
width:48%;
line-heigh:30px;
heigh:40px;
text-align:right;
padding-right:10px;
}
#p_text_2{
float:left;
color:blue;
width:48%;
line-heigh:30px;
text-align:left;
heigh:40px;
padding-left:10px;
}

@makich_ · 19.02.2022, 12:32 **[ТС]**

aleks2my3lop, а если я сделаю так, то на маленьком экране у меня он будет подниматься. Как я могу закрепить его?

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
<style>
    html, body {
      height: 100%;
      margin:0;
    }
    .wrapper {
      min-height: 100%;
      /* margin-bottom = высота футера */
      margin-bottom: 370px; 
    }
    .wrapper:after {
      content: "";
      display: block;
    }
    .footer, .wrapper:after {
      /* высота футера */
      height: 140px; 
    }
    .footer {
       background: #474e5d;
    }
  </style>
 
 
<div class="wrapper">
<div class="content">
   
  </div>
</div>
<footer class="footer">
<br>
<br>
<br>
  <p align="center">Тема для тренировки CSS <a href="https://match.isu.ru"> match.isu.ru </a>
</footer>

CSS
1
2
3
.footer {
text-align: center;
}

KingdaKa · 19.02.2022, 12:54

Как-то типа такого:

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
html,
    body {
      display: flex;
      height: 100%;
      width: 100%;
      background-color: #eee;
      margin: 0;
      padding: 0;
    }
 
    .wrapper {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      width: 80%;
      background-color: aqua;
      margin: 0 auto;
    }
 
    .content {
      flex: 1 1 auto;
      background-color: bisque;
    }
 
    .footer {
      display: flex;
      width: 100%;
      min-height: 140px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #889;
    }

HTML5
1
2
3
4
5
6
7
8
9
10
  <div class="wrapper">
    <div class="content">
      
      Recusandae est distinctio quia dolor doloribus, nulla, expedita id magni tempore aspernatur rem commodi nesciunt
      fuga! Accusamus provident distinctio illo tempore adipisci quis alias! Voluptatem quod qui eius odio natus!
    </div>
    <div class="footer">
      Тема для тренировки CSS <a href="https://match.isu.ru"> match.isu.ru </a>
    </div>
  </div>

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@makich_ -11 / 1 / 0 Регистрация: 07.09.2020 Сообщений: 206

	Футер 18.02.2022, 19:04. Показов 485. Ответов 3 Метки нет (Все метки) Подскажите, пожалуйста, как правильно создать такой футер? 0