Не уменьшается Div

@Sans · Регистрация: 03.04.2020

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

Итак. Суть в том что я делаю себе мини сайт, точнее своей семье. Проблема в том что я хочу сделать сайт таким что бы он был все время идеально втиснут (адаптивный). Прикол в том что нижняя часть с именем "Никита" не хочет уменьшаться что бы быть идеальной и что бы я мог со спокойной душой убрать скроллбары. НИКАКИЕ методы не действуют. Она как не влезает так и не уменьшается.

Помогите!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>Меню</title>
        <script src="https://gdhc.000webhostapp.com/simplejs.js"></script>
        <script src="code.js"></script>
    </head>
    <body>
        <div class="d" onclick="aleksey()"><p>Алексей</p></div>
        <div class="m" onclick="olga()"><p>Ольга</p></div><br>
        <div class="s" onclick="nikita()"><p>Никита</p></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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
body {
  font-family: Arial, Helvetica, sans-serif;
  /*overflow: hidden;*/
}
 
p {
    font-size: 100px;
}
 
.d {
 float: left;
 background-color: royalblue;
 width: 49.5%;
 height: 49%;
 color: white;
 text-align: center;
 vertical-align: middle;
 margin: -10px;
 border: 10px solid white;
 transition: all 0.5s ease;
}
 
.d:hover {
 background-color: white;
 color: royalblue;
 border: 10px solid royalblue;
    }
 
.m {
 float: right;
 background-color: green;
 width: 49%;
 height: 49%;
 color: white;
 text-align: center;
 vertical-align: middle;
 margin: -10px;
 border: 10px solid white;
 transition: all 0.5s ease;
        }
        
.m:hover {
 background-color: white;
 color: green;
 border: 10px solid green;
     }
 
.s {
 float: left;
 background-color: orange;
 width: 100%;
 color: white;
 text-align: center;
 vertical-align: middle;
 margin: 10px -10px;
 border: 10px solid white;
 transition: all 0.5s ease;
 z-index: 1;
 }
                
.s:hover {
 background-color: white;
 color: orange;
 border: 10px solid orange;
         }

@NTHing · 03.04.2020, 10:38

А если так...

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
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  /*overflow: hidden;*/
}
 
p {
    /*font-size: 100px;*/
      font-size: 10vw;
}
 
.d {
 float: left;
 background-color: royalblue;
 /*width: 49.5%;*/
 width: 50vw;
 height: 49%;
 color: white;
 text-align: center;
 vertical-align: middle;
 /*margin: -10px;*/
 border: 10px solid white;
 transition: all 0.5s ease;
}
 
.d:hover {
 background-color: white;
 color: royalblue;
 border: 10px solid royalblue;
    }
 
.m {
 float: right;
 background-color: green;
 /*width: 49%;*/
 width: 50vw;
 height: 49%;
 color: white;
 text-align: center;
 vertical-align: middle;
 /*margin: -10px;*/
 border: 10px solid white;
 transition: all 0.5s ease;
        }
        
.m:hover {
 background-color: white;
 color: green;
 border: 10px solid green;
     }
 
.s {
 float: left;
 background-color: orange;
 /*width: 100%;*/
 width: 100vw;
 color: white;
 text-align: center;
 vertical-align: middle;
 /*margin: 10px -10px;*/
 border: 10px solid white;
 transition: all 0.5s ease;
 z-index: 1;
 }
                
.s:hover {
 background-color: white;
 color: orange;
 border: 10px solid orange;
         }

@Sans · 03.04.2020, 14:23 **[ТС]**

Скажем так: стало хуже

@NTHing · 03.04.2020, 14:37

Значит я не понял то, что Вам нужно. Извините.

@novichek_1905 · 03.04.2020, 15:58

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
<!DOCTYPE html>
<html lang="ru">
 
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>Меню</title>
  <script src="https://gdhc.000webhostapp.com/simplejs.js"></script>
  <script src="code.js"></script>
</head>
 
<body>
  <div class="item item-half d" onclick="aleksey()">
    <p>Алексей</p>
  </div>
  <div class="item item-half m" onclick="olga()">
    <p>Ольга</p>
  </div><br>
  <div class="item s" onclick="nikita()">
    <p>Никита</p>
  </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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  /*overflow: hidden;*/
}
 
.item {
  height: 50%;
  transition: all 0.5s ease;
  border: 10px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.item-half {
  width: 50%;
}
p {
  font-size: 100px;
}
 
.d {
  background-color: royalblue;
  color: white;
}
 
.d:hover {
  background-color: white;
  color: royalblue;
  border: 10px solid royalblue;
}
 
.m {
  background-color: green;
  color: white;
}
.m:hover {
  background-color: white;
  color: green;
  border: 10px solid green;
}
 
.s {
  background-color: orange;
  width: 100%;
}
 
.s:hover {
  background-color: white;
  color: orange;
  border: 10px solid orange;
}

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@Sans 0 / 0 / 0 Регистрация: 03.04.2020 Сообщений: 2
	03.04.2020, 14:23 [ТС]
	Скажем так: стало хуже 0

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	03.04.2020, 14:37
	Значит я не понял то, что Вам нужно. Извините. 0