Как задать размер страницы

Set size of HTML page and browser window

I have a div element with . I want to set this element to be the size of the viewable area in the browser window. I am using the following JS to do so.

However, the browser window size is larger than the viewable size and horizontal and vertical scroll bars appear. How do I make it so that my HTML page fits into the browser window without a need for scroll bars?

I am basically asking, how can I make the document size the same as the viewport size?

5 Answers 5

This should work.

The background colors are there so you can see how this works. Copy this code to a file and open it in your browser. Try playing around with the CSS a bit and see what happens.

The width: inherit; height: inherit; pulls the width and height from the parent element. This should be the default and is not truly necessary.

Try removing the h1 < . >CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1 element is influencing the layout of its container. You could prevent this by declaring overflow: hidden; on the container or the body.

Как изменить ширину сайта?

В бутстрапе есть 2 класса .container-fluid для 100% ширины и .container для фиксированной. Вероятно, вам нужно поменять container-fluid н container.
А может и нет. Мы же не знаем, что у вас в коде, может там все стили бутстрапа перебиты.

Чего не стоит делать, так это менять ширину тега body.

• Facebook
• Вконтакте
• Twitter

Раз человек задаёт подобный вопрос, значит ему бесполезно говорить «задайте max-width», он скорее всего просто не знает что это такое и где его задают.
Поэтому давайте так:
1. Откройте страницу вашего сайта.
2. Правой клавишей мыши откройте контекстное меню и выберите «Просмотр кода страницы» (это в Chrome в других браузерах может быть чуть по другому, но главное, чтоб были слова код и страница).
3. В отдельной вкладке откроется код вашей страницы, найдите в нём конструкцию (тег) /head. Делается это так: нажимаете комбинацию клавиш Ctrl+F и в правом верхнем углу появляется окно поиска. Вводите в него нужную конструкцию, в нашем случае /head, и этот тег сразу подсвечивается на странице с кодом.
4. Находите конструкцию (тег), который идёт сразу после тега /head. Это может быть wrapper, body, или что-то другое. В современных темах встречаются разные названия, видимо в целях безопасности или ещё чего. зависит от бзика разработчика, главное чтоб после тега /head
5. Идёте в админку вашего сайта и выбираете в меню слева «Внешний вид», а в нём «Редактор тем». Переходите.
6. Вам сразу откроется файл style.css. Именно он вам нужен.
7. Открываете Поиск (Ctrl+F) и вбиваете тот элемент, который вы нашли на странице с кодом после /head
8. Нюанс: в редакторе WordPress подсветятся только те элементы, которые находятся в видимой части экрана и если в вашей теме в начале файла style.css много комментариев, то поиск нужного элемента не увидит. Придётся найти его чисто визуально, что не будет особо сложно, так как такие элементы находятся обычно вверху файла. На сервере это было-бы делать проще, но учитывая вашу подготовку, я вас туда не посылаю.
9. Нужный вам элемент скорее всего будет в нескольких селекторах, в том числе и в групповых, где нескольким элементам заданы одни и те-же свойства, поэтому я рекомендую прописать в файле отдельный селектор, в любом месте после закрывающей скобки> такого вида

body (или другое название) <
max-width: 80%; (число на ваше усмотрение, можно задать в пикселях)
>

Изменение формата страницы в программе Microsoft Word

Необходимость изменить формат страницы в программе Microsoft Word появляется не так часто. Тем не менее, когда такая задача возникает, далеко не все пользователи программы понимают, как сделать страницу больше или меньше установленного стандартна. В нашей сегодняшней статье расскажем именно об этом.

Изменение размера страницы в Ворде

По умолчанию Word, как и большинство текстовых редакторов, предоставляет возможность работы на стандартном листе формата А4, но в случае необходимости его всегда можно изменить как на больший, так и на меньший, причем делается это буквально в несколько кликов.

Откройте документ, формат страниц в котором необходимо изменить. На панели быстрого доступа перейдите во вкладку «Макет».

Примечание: В старых версиях текстового редактора необходимые для изменения формата инструменты располагаются во вкладке «Разметка страницы».

В некоторых случаях список поддерживаемых текстовым редактором форматов может отсутствовать в этом меню. Не стоит исключать и того, что ни один из представленных вариантов вас попросту не устроит. Столкнувшись с подобной проблемой, воспользуйтесь пунктом «Другие размеры бумаги», а затем выполните следующее:

Во вкладке «Размер бумаги» окна «Параметры страницы» в одноименном разделе выберите подходящий формат (здесь их перечень тоже может отсутствовать) или задайте размеры вручную, указав ширину и высоту листа (в сантиметрах).

Примечание: В разделе «Образец» можно увидеть масштабированный пример страницы, размеры которой вы изменяете.

Вот стандартные значения актуальных форматов листов (значения указаны в сантиметрах, ширина по отношению к высоте):

Формат листа изменится, заполнив его, вы сможете сохранить файл, отправить по электронной почте или распечатать на принтере. Последнее возможно лишь в том случае, если МФУ поддерживает заданный вами формат страницы. Более подробно об особенностях данной процедуры написано в отдельной статье на нашем сайте.

Как видите, изменить формат листа в Microsoft Word совсем несложно. К сожалению, без ограничений не обошлось, а потому приходится довольствоваться доступными размерами, и если минимальный вряд ли кому-то потребуется, то максимального, совсем немного не дотягивающего до A2, наверняка будет достаточно не всем.

Ширина веб-страницы

С развитием настольных компьютеров и мобильных устройств появилась необходимость создавать такие сайты, дизайн которых легко подстраивался бы под любой размер экрана. Адаптивность стала жизненно необходимым свойством сайта, поскольку на него может зайти как пользователь ПК, так и пользователь планшета или смартфона. И если раньше адаптивный дизайн считался чем-то необязательным, то сейчас сайт, который не подстраивается под любой тип устройства, пользователи сочтут устаревшим.

Чаще всего страницы сайта создаются на основе фиксированной либо относительной (непостоянной) ширины. Ниже мы опишем плюсы и минусы каждого варианта, а также поговорим про адаптивный веб-дизайн.

Фиксированная ширина страницы

Веб-страница с фиксированной шириной позволяет хорошо контролировать разметку. Ширина в данном случае задается в пикселях. С фиксированным контейнером вы можете быть уверены, что все элементы страницы будут находиться на своих местах без риска съехать и развалить верстку. И каким бы широким ни был экран, сайт с фиксированной шириной будет смотреться на нем прилично и читабельно.

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

Непостоянная ширина страницы

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

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

Адаптивный дизайн страницы

Золотая середина и наилучшее решение для современного сайта — это адаптивный веб-дизайн. Суть его заключается в создании нескольких вариаций разметки с коррекцией ширины контейнера в зависимости от размеров экрана. Например, для настольных компьютеров можно установить ширину страницы в 960 пикселей, для планшетов — ширину этой же страницы в 700 пикселей, а для всех смартфонов вообще задать непостоянную ширину в процентах. Таким образом вы можете превратить, к примеру, большой трехколоночный макет в узкий одноколоночный, если сайт просматривается с небольшого экрана.

Определять стили для страницы, основываясь на ширине окна браузера, можно благодаря медиазапросам (Media Queries). Как вы наверняка помните, мы уже пробовали знакомиться с ними на практике ранее в книге.

Чуть позже в данном разделе мы обязательно вернемся к технике создания адаптивного дизайна. А пока что далее в книге пойдет речь о таком понятии как блочная верстка.