Полностраничный Div Не отображается

Question

У меня есть страница HTML с одним div. Код тела выглядит следующим образом:

<div> 
</div> 

и CSS выглядит следующим образом:

body { 
    margin:0; 
    height:100vh; 
    width:100vh; 
} 

    div { 
    height:100vh; 
    width:100vh; 
    color:#000000; 
} 

Я видел пример, как это на другой StackOverflow пост, here.

Должно быть, я безумно глуп. В любом случае, я сделал это, чтобы я мог посмотреть на div, и теперь он занимает всю высоту, но не всю ширину. Он занимает чуть больше половины места.

Answer 1

Ваша настройка вашего фона на белый. Его не покажут. Попробуйте использовать # 000 для черного.

Answer 2

Это действительно работает, но, как я уже упоминал: это белый div, если он действительно появился, что вы сделали, чтобы доказать это?

Изменение цвета фона подтверждает его появление.

Рабочий пример http://jsfiddle.net/Cr3f2/

body { 
    margin:0; 
    height:100vh; 
    width:100vh; 
} 

    div { 
    height:100vh; 
    width:100vh; 
    color:#FF0000; 
    background-color:#FF0000; 
} 

Answer 3

, возможно, вы должны немного изменить ДИВ атрибуты, как это:

div { 
height:inherit; 
width: inherit; 
color:#000000; 

}

так, что он будет наследовать высоту и ширину, что уже указано на корпусе css селектор

Answer 4

Возможно, thi s будет полезна. Поскольку «Единицы просмотра» в настоящее время не имеют большой поддержки браузера, вы можете использовать высоту 100% вместо этого. Viewport Таблица Unit Поддержка браузеров: http://caniuse.com/#search=vh

Если вы хотите, DIV, чтобы покрыть области, которые идут ниже видового экрана в прокручивать областях, попробуйте код ниже:

html{ 
margin:0; 
padding:0; 
border:none; 
height:100%; 
} 

body { 
margin:0; 
padding:0; 
border:none; 
height:100%; 
} 

#wrapper-div { 
min-height:100%; 
} 

Уловка устанавливающее высоту до 100% на HTML и тела тегов и установка мин-высота 100% на обертку DIV. По умолчанию div будет расширяться на 100% по горизонтали. Минимальная и максимальная ширина и высота имеют отличную поддержку браузера, за исключением IE6. (Примечание: если вы все еще используете для поддержки IE6, есть простой хак, который заставит его работать. Добавьте это в свою оболочку-div, но ваш css не будет проверять {*display:inline; *zoom:1;})

Поддержка браузера для Min и Max Высота и ширина http://caniuse.com/minmaxwh

Вот JSFiddle, который имеет как 100% и Viewport единиц, чтобы играть с: http://jsfiddle.net/TalkingRock/ZHC5h/

---

Если вы хотите использовать Viewport единицы, попробуйте этот код.Она устанавливает ширину, как VW, а не ВЕ:

body { 
margin:0; 
height:100vh; 
width:100vw; 
} 

#wrapper-div { 
height:100vh; 
width:100vw; 
background-color:#cccccc; 
color:#000000; 
} 

Вот цитата из этой статьи: http://dev.opera.com/articles/view/css-viewport-units/

• 1vw: 1% от ширины окна просмотра
• 1vh: 1% от высоты окна просмотра
• 1vmin: 1vw или 1vh, независимо является самым маленьким
• 1vmax: 1vw или 1vh, независимо является крупнейшим