Как увеличить высоту веб-страницы до высоты экрана

Мне нужно, чтобы высота моей веб-страницы соответствовала высоте экрана без прокрутки.

HTML

<body>
    <form id="form1" runat="server">
    <div id="main">
        <div id="content">

        </div>
        <div id="footer">

        </div>
    </div>
    </form>
</body>

CSS

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:700px;}
#footer{width:100%;background-color:#666666;height:200px;}

Ответы

Ответ 1

Быстрое, не элегантное, но работающее автономное решение с встроенным CSS и без требований jQuery. AFAIK работает от IE9 тоже.

<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
        <div id="main" style="background-color:red">
            <div id="content">

            </div>
            <div id="footer">

            </div>
        </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
</body>

Ответ 2

Фиксированное позиционирование будет делать то, что вам нужно:

#main
{         
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}

Ответ 3

Как сказал еще один парень здесь, все, что вам нужно сделать, это добавить

height: 100vh;

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

Ответ 4

Не указывайте точную высоту, но относительные, добавляя до 100%. Например:

  #content {height: 80%;}
  #footer {height: 20%;}

Добавить

 html, body {height: 100%;}

Ответ 5

Try:

#content{ background-color:#F3F3F3; margin:auto;width:70%;height:77%;}
#footer{width:100%;background-color:#666666;height:22%;}

(77% и 22% грубо сохраняют пропорции content и footer и не должны вызывать прокрутку)

Ответ 6

вы можете использовать css для установки тега body на эти настройки:

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