Как сделать, чтобы страница корректно работала для телефонов?

@Andriyipz · Регистрация: 01.11.2020

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

Нет полос прокрутки. Сам код:https://jsfiddle.net/nyqa7bdu/

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
61
62
63
64
65
66
67
68
<body>
  <div class="container">
    <header>
      <div class = "container1"> 
      <div class="MainTop">
      <div class="ChildrenTop"><p>Мова програмування Javascript</p></div>
    </div>
    </div>
    </header>
    <main>
        <div class="LeftMain">
        <h2 align="center">Основні події:</h2>
        <p>
         ○Дата появи   »1995<br>
         ○Розробник  »Netscape Communications Corporation, Mozilla Foundation<br>
         ○Тестова версія   »27 липня 2010<br>
        </p>
        <p><img src="https://www.cyberforum.ru/images/photo.jpg">
        </p>
        <p class="image"></p>
        <p>Брендан Айк - творець Javascript</p>
      </div>
      <section class="content">
 
        <div class="row">
          <p>JavaScript (JS) — динамічна, об'єктно-орієнтована прототипна мова програмування. Реалізація стандарту ECMAScript. Найчастіше використовується для створення сценаріїв вебсторінок, що надає можливість на боці клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд вебсторінки.</p>
        </div>
 
        <div class="text">
            Поява в Netscape<br><br>
 
1995 року компанія Netscape поставила завдання вбудувати мову програмування Scheme чи «якусь схожу» в браузер Netscape. Для цього був запрошений Брендан Айк, американський розробник, що спеціалізувався на системному програмуванні. Також, для прискорення розробки, Netscape почали співробітництво з компанією Sun Microsystems.<br>
 
З часом, концепція розроблюваної мови програмування була розширена до можливості використання безпосередньо в HTML-коді сторінки. Компанії мали на меті створити мову, що могла зв'язати різні частини вебсайтів: зображень, Java-аплетів, об'єктної моделі документа. Ця мова повинна була стати зручною для вебдизайнерів та некваліфікованих програмістів. Робочою назвою нової мови була Mocha, яка була змінена на LiveScript в перших двох бета-версіях браузера Netscape 2.0. А дещо пізніше, користуючись популярністю бренду Java, LiveScript був перейменований на JavaScript і третя бета-версія (2.0B3) Netscape 2.0 вже вийшла з сучасною назвою. Для цього була придбана відповідна ліцензія у компанії Sun Microsystems, що володіла брендом Java.<br>
 
1992 року компанією Nombas була розроблена скриптова мова програмування Cmm (англ. С-minus-minus, гра слів навколо мови С++), яка пізніше була перейменована на ScriptEase та могла вбудовуватися в вебсторінки. Існує хибна думка, що JavaScript створено під впливом Cmm. Насправді Брендан Айк ніколи не чув про Cmm до того, як він створив LiveScript[8]. Пізніше, Nombas зупинили розробку Cmm та почали використовувати JavaScript, а згодом брали участь у групі зі стандартизації JavaScript.<br><br>
Стандартизація<br><br>
 
У листопаді 1996 року Netscape заявила, що відправила JavaScript в організацію Ecma International для розгляду мови як промислового стандарту. В результаті подальшої роботи з'явилась стандартизована мова з назвою ECMAScript. У червні 1997 року, Ecma International опублікувала першу редакцію специфікації ECMA-262. Рік по тому, у червні 1998 року, щоб адаптувати специфікацію до стандарту ISO/IEC-16262, були внесені деякі зміни і випущена друга редакція. Третя редакція побачила світ в грудні 1999 року.<br>
 
Четверта версія стандарту ECMAScript так і не була закінчена і четверта редакція не вийшла. Тим не менш, п'ята редакція з'явилася в грудні 2009 року.<br>
 
У червні 2015 року вийшла шоста версія, починаючи з якої комітет ECMAScript прийняв рішення перейти на щорічні оновлення і нова версія отримала назву ES2015. Вона отримала цілу низку нововведень, серед яких: об'єкт Promise для зручного асинхронного виконування коду, деструктуруюче присвоювання, стрілочні функції, функції-генератори, шаблонні рядки, оператори оголошення змінних let та const тощо.<br>
 
Версія ES2016 вийшла у червні 2016 року, серед нововведень оператор піднесення до степеня ** та метод Array.prototype.includes, який перевіряє, чи міститься переданий аргумент в масиві.<br>
 
Версія ES2017, що вийшла в червні 2017 року, додала можливість використання асихронних функцій, «висячих» ком в параметрах функцій, об'єкт Atomics, декількох нових методів для роботи з рядками.<br>
 
Версія ES2018 вийшла у червні 2018 року, додала можливість здійснювати асинхронні ітерації, оператор Spread (...) для роботи з об'єктами та масивами, декілька нових можливостей для регулярних виразів, метод Promise.prototype.finally, який спрацьовує по отриманню Promise'ом статусу "виконаний".<br>
 
Версія ES2019 вийшла у червні 2019 року, серед нововведень: новий тип даних Symbol, нові методи для роботи з рядками та масивами, перетворення об'єктів в масиви і навпаки за допомогою Entries.<br>
 
Актуальною на даний момент є версія ES2020, що вийшла у червні 2020 року. Вона додала до мови новий тип даних BigInt, оператор ?? для перевірки на null та undefined, можливість використання опціональних значень в об'єкті, динамічні імпорти, об'єкт globalThis, методи String.prototype.matchAll для пошуку у рядку за допомогою регулярних виразів та Promise.allSettled для спрацювання після виконання усіх Promise'ів.<br><br>
Актуальний стан<br><br>
JavaScript, наразі, є однією з найпопулярніших мов програмування в інтернеті. В перші роки існування, більшість професійних програмістів скептично ставилися до мови, цільова аудиторія якої складалася з програмістів-аматорів. Поява AJAX змінила ситуацію та звернула увагу професійної спільноти до мови, а її подальші модифікації за стандартами ES6+ внесли багато корисних можливостей, яких не вистачало для ефективного програмування. В результаті, були розроблені та покращені багато практик використання JavaScript (зокрема, тестування та налагодження), створені бібліотеки та фреймворки, поширилося використання JavaScript поза браузером.<br>
 
        </div>
      </section>                 
          </main> 
                  <footer>
      <div class='headerLogo'></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/HTML">⁂HTML⁂</a></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/CSS">⁂CSS⁂</a></div>
      <div class="headerLink"><a href="https://uk.wikipedia.org/wiki/JavaScript">⁂JAVASCRIPT⁂</a></div>
      <div class='headerLogo2'></div>
    </footer>  
    </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
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
@font-face {
    font-family: Oswald-Bold;
    src: url(fonts/Oswald-Bold.ttf); 
   }
html{
    height: 100%;
}
body{
    font: 18px 'Arial'; 
    margin: 0;
      min-height: 100%;
  display: flex;
  overflow: hidden;
}
.container{
    min-height: 100%; 
     margin: 0 auto;
      display: flex; 
      flex-direction: column;
      overflow: hidden;
    }
 
header, aside, footer{
    padding: 15px;
}
header, footer{
    color: #fff; 
    background-color: rgb(34,192,196); 
    border: 2px solid #000;
    height: 55px;
}
header{
    background-color: rgb(34,192,196);
    height: 127px;
}
 
main{
    display: flex;
     flex: 1;
    }
aside{
    flex-basis: 200px; 
    flex-shrink: 0; 
    border-left: 2px solid #000;
     border-right: 2px solid #000;
    }
aside, .row{
    background-color: #ffcc00;
}
 
.content{
    border-right: 2px solid #000;
     flex-grow: 1;
     position: relative;
     overflow: hidden;
    }
.row{
    padding: 2px;
     border-bottom: 2px solid #000;
    }
.text{
    padding: 15px;
    height: 434px;
    overflow: scroll;
}
footer {
    box-sizing: border-box;
    height: 55px;
    background-color: #4589B0;
    background-image: url(images/js2.jpg);
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-bottom:90px;
    flex-grow: 1;
}
.headerLink{
  display: inline-block;
  margin-left: 230px;
  margin-right: 60px;
  margin-top: 0px;
  font-size: 20px;
  margin-bottom: 0px;
  align-items: : center;
  padding-left: 70px;
  font-size:18px;
  color: rgb(34,192,196);
}
.headerLogo{
  display: inline;
  float: left;
  position: static;
  background-image:url('images/Kvasnuk_logo.png');
  background-image:no-repeat;
  background-position: left top;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 45px;
  height: 45px;
  margin-top: -10px;
}
.headerLogo2{
  display: inline;
  float: right;
  position: static;
  background-image:url('images/Kvasnuk_logo.png');
  background-image:no-repeat;
  background-position: left top;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 45px;
  height: 45px;
  margin-top: -10px;
}
div.LeftMain{
        flex-basis: 200px; 
    flex-shrink: 0; 
    border-left: 2px solid #000;
     border-right: 2px solid #000;
    width: 365px;
    height: 570px;
    background: rgb(107,0,125);
    background: linear-gradient(0deg, rgba(107,0,125,1) 0%, rgba(195,34,191,1) 100%);
}
 
div.LeftMain > p{
    font-family: Oswald-Bold;
    text-align: center;
    font-size: 18px;
    margin-top: -7px;
    color: rgb(255, 255, 255);
}
div.MainTop{
    background-image: url(images/js.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 1550px;
    height: 130px;  
    display: flex;
    align-items: center;
 
}
div.ChildrenTop{
    padding-left:50px;
    width: 500px;
    height: 120px; 
    margin-left: 310px;
    background-color: rgb(34,192,196);
}
div.ChildrenTop > p{
    font-family: Oswald-Bold;
    text-transform: uppercase;
    text-align: center;
    font-size: 40px;
    color: rgb(54, 0, 56);
    margin-top: 10px;
}
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 290px;
  }
 
  p.image:after {
    content: attr(image) "(Використання функції attr)";
  }
  @media screen and (max-width: 1000px) {
    div.ChildrenTop{
        width: 400px;
        height: 80px; 
        
    }
    @media screen and (max-width: 500px) {
    div.ChildrenTop{
        width: calc(300px + 100px);     
        height: 80px; 
        
    }
    div.LeftMain{
        width: 450px;
        height:  calc(300px * 5);      
        padding: 10px;
        background: rgb(107,0,125);
        background: linear-gradient(0deg, rgba(107,0,125,1) 0%, rgba(195,34,191,1) 100%);
    }

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения 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. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
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. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .