Класс-потомок не наследует высоту родителя

@Искорка Яркая · Регистрация: 26.09.2016

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

Здравствуйте.
Имеется класс шапки header и внутри него элементы.
Хочу разместить элементы относительно шапки, используя проценты, однако проценты не рассчитываются относительно шапки.
Для наглядности высота .header равна 154px, а высота .navigation — 100%.

Прошу ткнуть носом в моё неправильное понимание природы дивов и наследования, спасибо.

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
    <body>
        <div class="header">
            <div class="logo">
                <img src="img/d.png"/>
            </div><!-- .logo -->
            <div class="name-adress">
                <h1>Ветеринарная клиника</h1>
                <h2>Ул. Какая-то там, 22</h2>
                <h2>111-222-333</h2>
            </div><!-- .name-adress -->
            <div class="navigation">
                <ul>
                    <li>Главная</li>
                    <li>Отзывы</li>
                    <li>Работники</li>
                    <li>О нас</li>
                </ul>
            </div><!-- .navigation -->
            <div class="profile">
                <ul>
                    <li>Выход</li>
                    <li>Профиль</li>
                    <li>Администрирование</li>
                </ul>
            </div><!-- .profile -->
        </div><!-- .header -->
        <div class="content">
            <div class="post">
                <div class="post-header">
                    <h1>And that's the waaaay news goes!</h1>
                </div><!-- .post-header -->
                <div class="post-content">
                    <p>Not so fast Morty you heard your mom we’ve got adventures to go on Morty Just you and me and sometimes your sister and sometimes your mom but NEVER your dad! You wanna know why Morty? Because he CROSSED me Oh it gets darker Morty Welcome to the darkest year of our adventures First thing that’s different No more dad Morty He threatened to turn me in to the government so I made him and the government go away I replaced them both as the defacto patriarch of your family and your universe Your mom wouldn’t have accepted me if I came home without you and your sister so now you know the real reason I rescued you I JUST TOOK OVER THE FAMILY MORTY And if you tell your mom or sister I said any of this I’ll deny it And they’ll take my side because I’m a hero Morty And now you’re gonna have to do whatever I say Morty Forever And I’ll go out and find some more of that Mulan Szechuan Teriyaki dipping sauce Morty Because that’s what this is all about Morty That’s my one arm man I’m not driven by avenging my dead family Morty That was FAKE I’m driven by finding that McNugget Sauce I want that Mulan McNugget Sauce Morty That’s my series arc Morty If it takes 9 seasons I WANT MY MCNUGGET DIPPING SAUCE SZECHUAN SAUCE MORTY IT’S GONNA US ALL THE WAY TO THE END MORTY 9 MORE SEASONS MORTY 9 MORE SEASONS UNTIL I GET THAT DIPPING SZECHUAN SAUCE FOR 97 MORE YEARS MORTY I WANT THAT MCNUGGET SAUCE MORTY</p>
                </div><!-- .post-content -->
            </div><!-- .post -->
            <div class="picture">
                <img src="http://pictar.ru/data/media/12/animals__1544_.jpg"/>
            </div><!-- .picture -->
        </div><!-- .content -->
    </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
* {
    border: 1px solid rgba(0, 0, 0, 0.3);
    margin: 0;
    padding: 0;
}
 
html, body {
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
}
 
body {
    background-image: url(D:/exercises/img/bg.jpg);
}
 
li {
    list-style-type: none;
}
 
.header {
    height: 154px;
    width: 100%;
    background-color: red;
    color: white;
    font-family: "Roboto Slab", serif;
    font-weight: normal;
}
 
.header .profile {
    float: right;
    width: 152px;
    margin-right: 125px;
}
 
.header .navigation {
    width: 33.0833333333%;
    height: 100%;
    position: absolute;
    left: 43.33333333333333%;
    top: 10%;
    font-size: 1.25em;
}
 
.header .navigation li {
    display: inline;
}
 
.header .name-adress {
    width: 17.97166666%;
    height: auto;
    position: absolute;
    left: 24.16666666666667%;
    top: 42px;
}
 
.name-adress h1 {
    font-size: 1.9375em;
}
 
.name-adress h2 {
    font-size: 0.9375em;
}
 
.header .logo {
    margin-left: 10.83333333333333%;
}
 
 
.content {
    width: 65%;
    margin: 0 17.5%;
    background-color: white;
    height: 100%;
    padding-left: 1.875em;
    padding-bottom: 100%;
}
 
.content .post {
    width: 61.5384%;
    float: left;
}
 
.content .picture {
    width: 34.6154%;
    float: right;
}
 
img {
    max-width: 100%;
    height: auto;
}

Qwerty_Wasd · 04.08.2017, 17:43

Искорка Яркая,

Сообщение от Искорка Яркая

однако проценты не рассчитываются относительно шапки

причина тому

CSS
1
position: absolute;

в

CSS
1
2
3
4
5
6
7
8
9
.header .navigation {
* * width: 33.0833333333%;
* * height: 100%;
* * position: absolute;
* * left: 43.33333333333333%;
* * top: 10%;
* * font-
size: 1.25em;
}

Так как у родителя значение position не установлено, то размеры берутся от окна браузера.

Добавлено через 1 минуту
просто добавьте

CSS
1
position:relative;

в

Сообщение от Искорка Яркая

.header {

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .