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%;
}