Как адаптировать длину объектов к высоте страницы?

@Arhipka · Регистрация: 08.03.2020

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

Начну с начала. У меня есть друг-новичок(естественно я говорю не про себя), который захотел стилизовать полосы слева и справа страницы. Он(не я)сделал в теге main маркированный список, которому прописал display: inline-flex и внутри каждого элемента которого прописал div и начал лепить из них что хотел. Когда слепил, понял, что по мере заполнения страницы, ему придётся вручную прописывать длину каждого div-тега, включая тот, который он заполнял.
Что посоветуете этому бестолочу? (код и скрин с пояснениями прилагается)

Как адаптировать длину объектов к высоте страницы?

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
<body>
  <header>
  </header>
  <main>
    <div class="topwall1"></div>
    <div class="topwall2"></div>
  <ul>
    <li>
      <div class="leftwall"></div>
    </li>
    <li>
      <section class="wallz1">
        <div class="wallofwall1"></div>
      </section>
    </li>
    <li>
      <div class="main"></div>
    </li>
    <li>
      <section class="wallz2">
        <div class="wallofwall2"></div>
      </section>
    </li>
    <li>
      <div class="rightwall"></div>
    </li>
  </ul>
  </main>
  <footer>
    <div class="bottomwall1"></div>
    <div class="bottomwall2"></div>
    <div class="foot"></div>
  </footer>
</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
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
*{
  padding: 0;
  margin: 0;}
body{
  background: #555;}
header{
  z-index: 6;
  position: relative;
  width: 1345px;
  height: 90px;
  background: #333333;
  border: 2px solid #00e9dd;}
main{
  background: #555555;
  height: 404px;}
.topwall1{
  z-index: 2;
  position: relative;
  width: 1345px;
  height: 20px;
  background: #666;
  border-left: 2px solid #00e9dd;
  border-right: 2px solid #00e9dd;}
.topwall2{
  position: relative;
  z-index: 1;
  width: 1345px;
  height: 20px;
  background: #666;
  border-left: 2px solid #00e9dd;
  border-right: 2px solid #00e9dd;
  border-bottom: 2px solid #00e9dd;}
main ul{
  display: inline-flex;
  list-style: none;}
.leftwall{
  transform: translateY(-22px);
  z-index: 1;
  position: relative;
  width: 230px;
  height: 404px;
  background: #454545;
  border: 2px solid #00e9dd;}
.wallz1{
  perspective: 115px;
  transform: translatey(-22px);
  z-index: 2;
  position: relative;}
.wallofwall1{
  height: 382px;
  width: 15px;
  background: #666;
  z-index: 1;
  position: relative;
  border-bottom: 2.5px solid #00e9dd;
  border-top: 2.5px solid #00e9dd;
  border-right: 2.5px solid #00e9dd;
  transform: translate(-2px, 10px) rotatey(45deg);}
.main{
  position: relative;
  width: 840px;
  margin: 10px, 250px, 100px, 10px;}
.rightwall{
  transform: translate(6px, -22px);
  z-index: 1;
  position: relative;
  width: 230px;
  height: 403px;
  background: #454545;
  border: 2px solid #00e9dd;}
.wallz2{
  perspective: 115px;
  transform: translatey(-22px);
  z-index: 2;
  position: relative;}
.wallofwall2{
  height: 382px;
  width: 15px;
  background: #666;
  z-index: 1;
  position: relative;
  border-bottom: 2.5px solid #00e9dd;
  border-top: 2.5px solid #00e9dd;
  border-left: 2.5px solid #00e9dd;
  transform: translate(7px, 10px) rotatey(-45deg);}
.bottomwall1{
  position: relative;
  transform: translateY(4px);
  width: 1345px;
  height: 20px;
  background: #666;
  border: 2px solid #00e9dd;}
.bottomwall2{
  z-index: 2;
  position: relative;
  width: 1345px;
  height: 18px;
  background: #666;
  border-left: 2px solid #00e9dd;
  border-right: 2px solid #00e9dd;}
.foot{
  position: relative;
  transform: translateX(0px);
  width: 1345px;
  height: 200px;
  background: #333;
  text-align: center;
  z-index: 5;
  border: 2px solid #00e9dd;}

@Sanya2109 · 04.05.2020, 20:08

Я бы создал div с классом main__inner для main и footer__inner для 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
<main>
  <div class="main__inner">    
    <div class="topwall1"></div>
    <div class="topwall2"></div>
  <ul>
    <li>
      <div class="leftwall"></div>
    </li>
    <li>
      <section class="wallz1">
        <div class="wallofwall1"></div>
      </section>
    </li>
    <li>
      <div class="main"></div>
    </li>
    <li>
      <section class="wallz2">
        <div class="wallofwall2"></div>
      </section>
    </li>
    <li>
      <div class="rightwall"></div>
    </li>
  </ul>
 </div>
  </main>

@AlexZaw · 04.05.2020, 21:38

Arhipka, можно так:

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrap">
  <div class="left">
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in optio omnis similique magni sunt quisquam quasi, est ipsam necessitatibus rerum adipisci harum, molestiae, alias ut pariatur qui blanditiis voluptatem.</p>
  </div>
  <div class="main"></div>
  <div class="right">
    <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>

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
* {
  box-sizing: border-box;
}
body {
  background: #666;
}
.wrap {
  margin-top: 50px;
  display: flex;
}
.main {
  margin: 10px 17px;
  width: 60%;
  border: 1px solid #00e9dd;
  background: #454545;
}
 
.left,
.right {
  position: relative;
  width: 20%;
  border: 1px solid #00e9dd;
  background: #454545;
}
.left:before,
.left:after,
.right:before,
.right:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 1px;
  background: #00e9dd;
  left: 100%;
  top: 4px;
  transform: rotateZ(27deg);
}
.left:after {
  top: initial;
  bottom: 4px;
  transform: rotateZ(-27deg);
}
.right:before,
.right:after {
  left: initial;
  right: 100%;
}
.right:before {
  transform: rotateZ(-27deg);
}
.right:after {
  top: initial;
  bottom: 4px;
  transform: rotateZ(27deg);
}

Добавлено через 17 минут

Сообщение от Arhipka

Что посоветуете этому бестолочу?

Да, насчет совета - не использовать фиксированные размеры там где в этом нет никакой нужды.

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

Как адаптировать длину объектов к высоте страницы?

Решение