HTML: как установить ширину дочернего элемента = ширину окна браузера?

Question

Я хочу отобразить дочерний элемент моей html-страницы по всему окну браузера ... другими словами, я хотел бы увеличить его и сохранить его в том же размере, что и окно браузера, когда он изменяется после загрузки.

Мне было интересно, нужно ли мне перемещать этот объект за пределы родительских элементов или я могу установить эти свойства с помощью css.

На данный момент, если я установлю ширину: 100% и высоту: 100%, это подходит для родителя (конечно), а не окна.

спасибо

Answer 1

Обычно лучше использовать относительное расположение, когда это возможно, и любые большие дочерние элементы должны быть равны родительскому. Но вы всегда можете абсолютно позиционировать его:

position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;

Answer 2

Ширина всегда относится к родительскому элементу. Вы можете использовать абсолютное позиционирование, чтобы этот конкретный элемент был «вне» его родителя (то есть относительно позиционирования и потока), и установить его на 100%. Но будьте осторожны, это может не оказаться там, где вы хотите, чтобы это было визуально.

.someElement {
    position: absolute;
    width: 100%;
    height: 400px;
}

Для родительского элемента не может быть указано «position :lative», чтобы это работало.

Answer 3

ширина проста:

width: 100%;

для роста вам нужно что-то вроде этого:

100% Высота компоновки с использованием CSS