Создание div соответствует начальному экрану

Я хочу, чтобы div соответствовал начальной высоте и ширине экрана пользователя.

Я думаю, что следующая грубо нарисованная диаграмма объясняет это лучше:

#div
{
 width: 100%;
 height: 100%;
}

похоже, не работает

Ответ 1

Если я правильно понял (там есть место для путаницы):

http://jsfiddle.net/zRpNp/

#screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}

Возможно, вы после версии position: fixed: http://jsfiddle.net/zRpNp/1/

Ответ 2

Лично мне нравится чистое решение CSS. Просто используйте блок vh.

#filldiv
{
    height: 100vh;
}

Это заставит div заполнить высоту окна браузера.

Кроме того, вы также можете заполнить ширину окна браузера, это использует только блок vw.

#filldiv
{
    width: 100vw;
}

Оба показаны в этой скрипке

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

Ответ 3

Установка высоты до 100% в div означает, что ваш div заполнит 100% своего контейнера; не 100% страницы.

Я бы предположил, что вы либо захотите использовать объявление минимальной высоты в своем div или его контейнере, либо использовать JavaScript, чтобы найти начальную высоту экрана пользователя (потому что у каждого будет что-то немного другое) и установите это как встроенный стиль на вашем div.

Скомпонуйте что-то в соответствии со следующими строками:

var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}

Ответ 4

Вы можете сделать это полностью с помощью CSS:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
}

Ответ 5

другой способ сделать это только с помощью CSS...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */

#fillScreen {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

Ответ 6

Я думаю, что это самый простой способ... позволяя браузеру сказать, что он высок... используя java script

<html>
<head>
<title>viewport</title>
<style type="text/css">
  * { padding:0; margin:0; }
  #test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
  window.onload = function() {
    var height = getViewportHeight();
    alert("This is what it looks like before the Javascript. Click OK to set the          height.");
    if(height > 0)
      document.getElementById("test").style.height = height + "px";
  }
  function getViewportHeight() {
    var h = 0;
    if(self.innerHeight)
      h = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
      h = document.documentElement.clientHeight;
    else if(document.body) 
      h = document.body.clientHeight;
  return h;
  }
</script>
 </head>
 <body>
  <div id="test">
  <h1>Test</h1>
  </div>
  </body>
 </html>`

Ответ 7

<html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>

работает для меня

Ответ 8

Ваш стиль css ищет id="div" не тег div. Это должно работать в предположении, что ваш div будет создан с помощью <body> или другого 100%, 100% html-элемента:

<div id="fullViewPort">
    My Content
</div>

#fullViewPort {
    width: 100%;
    height: 100%;
}

Ответ 9

 <style>
    body    {
        margin:0;
        padding:0;
    }
    #try    {       
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        clear:both;
    }
    #next   {
        height:10%;
    }
    </style>

    <body>
    <div id="try">hello1</div>
    <div id="next">hello2</div>
</body>

работает для меня.