Я не могу установить высоту div в%. Но он работает в пикселях;

html, body {
 height: 100%;
}

.parent {
    position: absolute;
}

.child {
 height: 300px;   <<--- Want this to be in %
    overflow: auto;
    position: absolute;
}

.childsChild {
   height: 100%;
   position: relative;
}

Моя структура html

Div -> Parent
  Div -> Child
    Div -> childsChild

Всякий раз, когда я пытаюсь сделать это с%, это не получается. Может ли кто-нибудь помочь мне решить эту проблему?

css
-3
Ashwin Hegde 25 Апр 2014 в 11:30

3 ответа

Лучший ответ

Итак, в вашем коде есть родительский элемент div без высоты. В родительском у вас есть ребенок с height: 30%. Как ребенок может быть width: 30% и появиться? 30% из 0 равно ... 0.

Также вы должны определить для них ширину (потому что они у вас есть position: absolute;), подробнее об этом < strong> здесь .

HTML:

<div class="parent">
    <div class="child">
        <div class="childsChild"></div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.parent {
    position: absolute;
    background: red;
    height: 100%;
    width: 100%;
}
.child {
    height: 300px;
    width: 100%;
    overflow: auto;
    position: absolute;
    background: blue;
}
.childsChild {
    height: 30%;
    width: 100%;
    position: relative;
    background: green;
}

ДЕМО ЗДЕСЬ

2
Community 23 Май 2017 в 10:26

Поскольку класс .child css содержит абсолютное позиционирование , он не понимает, сколько высоты в % .

В этом случае вам нужно будет указать фиксированную высоту.

% работает, когда позиционирование не является абсолютным или сам ваш контейнер содержится внутри другого контейнера, который может быть абсолютным, но имеет некоторое значение, которое также фиксировано, например 300 пикселей или что-то в этом роде.

-1
Lalit Mehra 25 Апр 2014 в 07:45

Ставьте проц вот так:

height:100vh;
-1
Luiggi 25 Апр 2014 в 07:47