https://jsfiddle.net/z3fhtbq9/Как позиционирование wil работает в css?
Я ожидаю, что вышеприведенная скрипка покажет цвет фона красным сверху донизу. Но это не так. Почему? не
<div style="background-color:red;position:relative;top:0px;bottom:0px;">
Добавить размер Div (ширина высота) .. он будет работать
<div style="height: 100vh;background-color:red;position:relative;top:0px;bottom:0px;">
</div>
ДИВ имел высоту 0 и ширина 0 (ширина была такой же всегда) вот почему нет изменение наблюдалось. Если бы вы добавили что-то внутри div как какой-то текст или просто дали высоту, он мог бы сработать.
Здесь 100vh означает, что элемент всегда будет на 100% высотой области просмотра, имеющейся у устройства.
Элемент с абсолютным позиционированием не влияет на другие элементы и не влияет на другие элементы. Поэтому в основном это не влияет на любым другим элементом. Таким образом, 100% vh не работает на нем. Он будет работать , если вы положите в относительно позиционированный div полного размера. Абсолютно расположенный элемент расположен по отношению к ближайшему расположенному предку (не статическому).
'width' был на 100%, только ничего не было' height'. – deceze
@deceze .: да точно..ok позвольте мне отредактировать ответ ... Просто ответил поспешно. – coderredoc
На самом деле, что такое использование позиции: относительная вершина: 0 внизу: 0 здесь? Он должен автоматически расширяться? –
Я не вижу отношения к позиционированию, но чтобы заполнить тело этим div, вам нужно установить ширину и высоту элементов. Вы можете установить на CSS:
html, body {width:100%; height:100%; margin:0;}
и ваш стиль сНа добавить ширину и высоту 100%, как это:
<div style="width:100%; height:100%; background-color:red;position:relative;top:0px;bottom:0px;"></div>
Или вы можете просто положить красный стиль фона на DIV тела.
Позиционирование элемента как относительного «относительно самого себя» .Means, если элемент позиционируется как относительный с верхним 50px, тогда он получит место 50px сверху, где он будет обычно размещаться. Если это правда, в моем случае я отношу положение относительно, верхнее и нижнее положение к 0. Так оно заполняет все тело Но это не происходит. Почему? –
Проверьте следующий скрипт https://jsfiddle.net/z3fhtbq9/9/ Как он отображает цвет фона во всей области? –
.... минимальный пример? –
https://jsfiddle.net/z3fhtbq9/11/ https://jsfiddle.net/z3fhtbq9/9/ Проверьте два скрипта. Почему в первой скрипте не отображается фон? –
Привет, как дела? –