Задайте размер страницы HTML и окна браузера.

У меня есть элемент div с ID = "container". Я хочу, чтобы этот элемент был размером области просмотра в окне браузера. Я использую следующую JS для этого.

var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;

Однако размер окна браузера больше размера видимого, и появляются горизонтальные и вертикальные полосы прокрутки. Как сделать так, чтобы страница HTML помещалась в окно браузера без необходимости прокрутки?

EDIT:

Я в основном спрашиваю, как я могу сделать размер документа таким же, как размер видового экрана?

Ответы

Ответ 1

Это должно работать.

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                background-color: green;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                background-color: pink;
            }
            h1 {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>Hello World</h1>
        </div>
    </body>
</html>

Цвета фона находятся там, чтобы вы могли видеть, как это работает. Скопируйте этот код в файл и откройте его в своем браузере. Попробуйте немного поиграть с CSS и посмотрите, что произойдет.

width: inherit; height: inherit; вытягивает ширину и высоту из родительского элемента. Это должно быть значение по умолчанию и не является действительно необходимым.

Попробуйте удалить блок h1 { ... } CSS и посмотреть, что произойдет. Вы можете заметить, что макет реагирует нечетным образом. Это связано с тем, что элемент h1 влияет на расположение его контейнера. Это можно предотвратить, объявив overflow: hidden; в контейнере или теле.

Я также предлагаю вам прочитать некоторые из CSS Box Model.

Ответ 2

Вы можете использовать width: 100%; в своем css.

Ответ 3

<html>
<head >
<title>Welcome</title>    
<style type="text/css">
#maincontainer 
{   
top:0px;
padding-top:0;
margin:auto; position:relative;
width:950px;
height:100%;
}
  </style>
  </head>
<body>
 <div id="maincontainer ">
 </div>
</body>
</html>