Question

这是我的代码：http://jsfiddle.net/spadez/LQKfk/2/

HTML：

<div id="main">
    <div id="header" class="fullheight">
        <div id="nav">Test</div>
        Nav
    </div>
    <div id="content">
Hello           
    </div>
</div>

CSS：

*{padding: 0px; margin: 0px;}
#main{
background-color: #3B2F63;
background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
background-repeat: no-repeat;
background-size: 100% 1000px;
color: #c7c0de;
margin: 0;
padding: 0;
}

#header { }
#content{background-color: white;}

.fullheight{
display: block;
position: relative;
height: 100%;
}

使用此代码，为什么渐变区域不会延伸窗口的整个高度？

Answer 1

您需要为渐变区域指定100％的高度，这又需要相对于视口，可以通过为html和body元素设置相同来建立。 / p>

Demo Fiddle

添加：

html,body, #main{
    height:100%;
}

Answer 2

完整高度基本上与文档首先相关。你需要使文件全高度的窗口至少让文件中的div达到窗口的全高。

如果您的文档可能包含的内容多于适合当前窗口大小的内容

，实现此功能可能会非常棘手。

取SW4的小提琴并改变

height: 100%;

在html, body上

min-height: 100%;

请参阅此衍生小提琴：http://jsfiddle.net/SGjcc/1/

Answer 3

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

Answer 4

html,body, #main
{
    height:100%;
}

Answer 5

您可以尝试以下代码：

<强> Demo

#main{
  background-color: #3B2F63;
  background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
  background-repeat: no-repeat;
  background-size: 100% 1000px;
  color: #c7c0de;
  margin: 0;
  padding: 0;
  height:100%;
}

全高等级并不能使div成为全高

5 个答案:

Demo Fiddle