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.
- Вконтакте
Раз человек задаёт подобный вопрос, значит ему бесполезно говорить «задайте 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%; (число на ваше усмотрение, можно задать в пикселях)
>