div高度：100％包裹内容

Question

为什么我的div只根据其内容颜色？这是下面代码中按钮的高度。div只包含其内容。

我的div元素是

<div id="test">
 <button>testing</button?
 </div>

和css

#test{
background-color:#666;
width:100%;
height:100%;
}

我将高度设置为100％，但它只选择了按钮元素的高度。我可以为网站的整个高度着色吗？最好的方法是什么？

Answer 1

要使任何元素适合height:100%，HTML和身高应设置为100％

body, html{  
  height:100%
}

<强> DEMO

Answer 2

如果必须为整个网站着色，可以将css直接应用于body或html标记。

body, html {
    min-height: 100%;
    background-color:#666;
}

Answer 3

是的，因为div的高度被按钮占用。

所以总是从下面的css开始覆盖浏览器

body, html {
  width: 100%;
  height: 100%;
}