Блок на весь экран | CSS
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]
html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
7 комментариев:
Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».
Как установить размеры и положение нового окна?
Но при этом оно упирается в правый край экрана и занимает его весь по вертикали.
Не пойму, как средствами CSS задать размер экрана по ширине и высоте, и разместить его по середине?
Как получить размеры и положение всего окна?
Не рабочей области, а именно целиком.
Как задать размеры нового окна при переходе по ссылке?
Доброго времени суток! Помогите. Стоит задача: по клику во флеше вызвать новое окно (по ссылке).
Как установить размеры окна?
Здравствуйте, как установить размеры главного окна ? Любого , MainWindow к nримеру
Как установить размеры окна программно?
Как установить размеры окна MainWindow (QMainWindow) программно?
.window { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -250px 0px 0px -150px; }
Сообщение от kvant355 
В теме приведен полный код.
я скопировал целиком ваш код, сохранил в html файле, при нажатии на ссылку у меня просто создается новое окно браузера
Добавлено через 2 минуты
как я понимаю, окно создает скрипт, которого как раз и нет. Вы предоставили просто ссылку
Сообщение от kvant355
Я предположил, что код окна определяет его содержимое и не повлияет на его положение.
Код скрипта st-clic.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
html> head> meta http-equiv="content-type" content="text/html; charset=UTF-8"> style> .window < width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -250px 0px 0px -150px; >/style> title>Document/title> echo 'tr> td>Проба/td> /tr> /table>'; ?>
Эти изменения повлияли на положение таблицы внутри окна, но само окно осталось тем же самым — смещенным вправо и уходящим вниз за пределы экрана.
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
script type="text/javascript"> var w = 600; // ширина окна var h = 300; // высота окна function detectSize(){ var winW = 630, winH = 460; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } return [winW,winH]; } var size=detectSize(); if(size[0] != w || size[1] != h){ var url=window.location.href; window.open ( url, "new_window", "width = " + w + ", height = " + h); window.close(); } script> Добавлено через 3 минуты
либо попробуйте так
a href="#" onClick="winObj = window.open ('/my-files/st/st-clic.php', 'myWin','status=no, titlebar=no, toolbar=no, scrollbars=no, menubar=no, location=no, Width=500, Height=270'); winObj.focus (); return false">img src="/88-31.gif" width="88" height="31">/a>
Второй вариант работает — это я знал с самого начала. Но нюанс в том, что в этом случае заданы размеры в пикселях, а потому на разных мониторах окно прыгает по экрану. Собственно, по этой причине я и написал в теме, что настройки нужны средствами CSS, чтобы их можно было выразить в процентах.
Сам сайт имеет резиновую верстку и прекрасно адаптируется к монитору любой ширины. Можно ли также сбалансировать это открывающееся окно, задав его параметры в процентах?
у меня когда то тоже была такая проблема, помню что процентное число должно быть большим, примерно так попробуйте
a href="#" onClick="winObj = window.open ('/my-files/st/st-clic.php', 'myWin','status=no, titlebar=no, toolbar=no, scrollbars=no, menubar=no, location=no, Width=400%, Height=400%, top=150%, left=350%'); winObj.focus (); return false">img src="/88-31.gif" width="88" height="31">/a>
Добавление знака «%» ничего не меняет. Мне кажется, браузер в этом коде этот знак игнорирует.
Width=400, Height=400, top=150, left=350
Width=400%, Height=400%, top=150%, left=350%
Влад у тебя нет размеров и координат окна, их нужно дописать, а потом скриптом пересчитывать и центрировать окно
это скан как есть, неправленый, тут про окна, расковыривай явные ошибки
расписаны модальные и не модальные окна
Главное окно браузера создается не с помощью сценариев, а автоматически, когда
пользователь запускает браузер, а также при открытии документа с определен-
ным URL-адресом или другого файла.В HTML открыть документ в новом окне
можно с помощью атрибута TARGET тега ссылки .Например,
С помощью сценария можно создать любое количество окон.Для этого применя-
w i n d o w.o p e n ( [ п а р а м е т р ы ] )
Этому методу передаются следующие необязательные параметры :
• адрес документа, который нужно загрузить в создаваемое окно;
• имя окна (как имя переменной);
• строка описания свойств окна (features).
В строке свойств записываются пары свойство=значение , которые отделяются друг
от друга запятыми.В табл.2.2 приведен список свойств окна , передаваемых
в строке features.Значения yes и по можно заменить числовыми эквивалентами
Таблица 2.2.Свойства окна, передаваемые в строке features
Свойство Значения Описание
channel mode yes, no, l, 0 Показывает элементы управления Channel
directories yes, no, 1, 0 Включает кнопки каталога
fullscreen yes , no, 1, 0 Полностью разворачивает окно
height Число Высота окна в пикселах
left Число Положение по горизонтали относительно левого края экрана
location yes, no, 1, 0 Текстовое поле Address
menubar yes, no, 1, 0 Стандартные меню браузера
resizeable yes, no, 1, 0 Может ли пользователь изменять размер окна
scrollbars yes , no, 1, 0 Горизонтальная и вертикальная полосы прокрутки
status yes, no, 1, 0 Стандартная строка состояния продолжение &
142 Глава 2.Основы создания сценариев
Свойство Значения Описание
toolbar yes, no, \, 0 Включает панели инструментов браузера
top Число Положение по вертикали относительно верхнего края экрана
width Число Ширина окна в пикселах
window.open(«mypage.htm»,»NewWin» , «height=150 , width=300» )
w i n d o w.o p e n ( » m y p a g e.h t m » )
strfeatures = «top=100,left=15,width=400 , height=200 , location=no ,
w i n d o w.o p e n ( » w w w.a d m i r a l.r u / ~ d u n a e v » , «Са м себ е веб-дизайнер» ,
Вместо третьего параметра (строки features) можно использовать значение true.
В этом случае указанный документ загружается в уже существующее окно, вы-
тесняя предыдущий.Например, window.open(«mypage.htm»,»NewWin» , true).
Метод window.open( ) возвращает ссылку на объект окна.Эту ссылку можно сохра-
нить в переменной, чтобы потом использовать, например при закрытии окна.
Для закрытия окна служит метод close().Однако выражения window.close() или
self.dose() закрывают главное окно, а не дополнительное, которое вы создали ме-
тодом ореп().В этом случае как раз и необходима ссылка на созданное окно.Эту
ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до
тех пор, пока главный документ загружен в браузер.Вот пример:
va r objwi n = w i n d o w.o p e n ( » m y p a g e.h t m » , » М о я страница» )
Метод window.open () открывает новое независимое окно как экземпляр браузера.
В этом случае при закрытии главного окна браузера новое окно остается откры-
тым.Независимые окна называют еще немодальными (modalless).Однако можно
создать и так называемое модальное окно.Пока открыто модальное окно, пользо-
ватель не может обратиться к другим окнам, в том числе и к главному.Так обыч-
но работают стандартные диалоговые окна.Например, окна, создаваемые метода-
ми alert(), prompt() и confirm() , являются модальными.В модальное окно можно
Для создания модального окна используется метод showModalDialog().Так же, как
и метод open() , он принимает в качестве параметров адрес документа (файла), имя
окна и строку свойств.Однако формат этой строки другой.В частности, парамет-
ры в строке разделяются точкой с запятой, размеры окна и координаты его верх-
него левого угла требуют указания единиц измерения (например, рх — пикселы).
Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не
нужна для модального окна.
В табл.2.3 приведен список свойств окна, созданного методом showModalDialog() ,
передаваемых в строке features.
2.5.Работа с окнами и фреймами 143
Таблица 2.3.Свойства окна, созданного методом showModalDialog()
Свойство Значения Описание
order thick, thin Размер рамки вокруг окна
center yes, no (1, 0) Выравнивание окна по центру главного
dialogHeight Число + единицы измерения Высота окна
dilalogLeft Число + единицы измерения Горизонтальная координата
dialogTop Число + единицы измерения Вертикальная координата
dialogWidth Число + единицы измерения Ширина окна
font Строка таблицы стилей Стиль, определенный по умолчанию
font-family Строка таблицы стилей Вид шрифта, определенный по умолчанию
font-size Строка таблицы стилей Размер шрифта, определенный
font-style Строка таблицы стилей Тип шрифта, определенный по умолчанию
font-variant Строка таблицы стилей Вариант шрифта (обычный/курсив),
определенный по умолчанию для окна
font-weight Строка таблицы стилей Толщина шрифта, определенная
help yes , no, 1, О Включение кнопки Help в верхнюю панель
maximize yes, no, 1, 0 Включение кнопки Maximize в верхнюю
minimize yes, no, 1, 0 Включение кнопки Minimize в верхнюю