Полноэкранный элемент подстраивается под размер области просмотра

Я пытаюсь заставить некоторые графические элементы функционировать как изменяемый размер окна Finder или проводника Windows... ничем не отличающимся от тех, которые вы открываете и закрываете на экранах вашего компьютера. Окно в основном занимает 100% области просмотра, но с полями по 15 пикселей с каждой стороны.

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

.window {
background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
width:100%;
height:100%;
margin: 15px 15px 15px 15px;

}

Вот ссылка на JSFiddle: http://jsfiddle.net/kgT5T/


html css graphic
person Matthew    schedule 10.07.2014    source источник
comment
Я не вижу того, что вы описываете. В Chrome с html, body{ height: 100%; width:100%;} это увеличивается до полного размера окна и имеет поля 15px со всех сторон, кроме правой. Однако не уверен, что случилось с правильным полем.   -  person Roddy of the Frozen Peas    schedule 11.07.2014
comment
Тег body включен для вас в jsfddles, также я предполагаю, что вы имели в виду </section> Вот обновленная скрипта jsfiddle.net/kgT5T /1   -  person Jason Sperske    schedule 11.07.2014

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете получить желаемый эффект, используя (ab) абсолютное позиционирование.

Вот демонстрация JSBin: http://jsbin.com/jovutace/1/

CSS просто так:

html, body {
    height: 100%;
    width: 100%;
    margin: 0; padding: 0;
}

.window {
    background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    position: absolute;
}

Первое правило CSS устанавливает размер элементов <html> и <body> так, чтобы они занимали весь порт просмотра. Объявления margin и padding удаляют все стили, специфичные для браузера (хотя я, конечно, рекомендую полный сброс CSS).

Второе правило устанавливает для div .window абсолютное позиционирование, а затем эффективно прикрепляет каждую сторону на 15 пикселей от этого края.

Обычно я не рекомендую использовать абсолютное позиционирование, но по какой-то причине происходит какое-то странное поведение, когда вы используете относительное позиционирование и height: 100%; width:100%; на .window.

В демонстрации JSBin я сделал фон HTML желтым для контраста, чтобы было легче увидеть, где находятся края изображения при изменении размера окна.

person Roddy of the Frozen Peas    schedule 10.07.2014
comment
Я думаю, что мы получили победителя, забудьте о моем ответе. Как будто я забыл, как много можно сделать с помощью простого абсолютного позиционирования, с левым, правым, верхним и нижним... - person bardzusny; 11.07.2014
comment
@bardzusny На самом деле мне нравится твой ответ. Я вообще не думал об использовании calc(), но это хорошая альтернатива, если вы не возражаете против того факта, что IE до 9 не поддерживает его полностью. - person Roddy of the Frozen Peas; 11.07.2014
comment
Спасибо за помощь! Вот результат, если интересно. jsbin.com/jovutace/2 - person Matthew; 11.07.2014
comment
Хороший! Это довольно мило. Спасибо, что поделился. :) - person Roddy of the Frozen Peas; 11.07.2014

arrow_upward
1
arrow_downward

http://jsfiddle.net/G6v9G/1/

div {
    background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
    margin: 15px;
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}

‹ div > кстати, это ваше окно.

Мы используем довольно новую вещь, calc()... почему? Либо вам нужно установить поля в процентах (левое поле + окно + правое поле = 100%), либо рассчитывать на пользователя, использующего современный браузер.

В противном случае просто помните о "position: absolute;" - но "положение: фиксированное;" также кажется применимым к вашему случаю. Проверьте это.

PS: Почему элемент ‹ body > имеет «margin: 0;»? Забудьте об этом, потому что браузеры webkit по умолчанию добавляют некоторое поле к ‹ body >. Не забудьте использовать сброс CSS: http://meyerweb.com/eric/tools/css/reset/ (один из многих)

person bardzusny    schedule 10.07.2014