全高級別不能使div全高

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元素設置視口來建立該視口。

演示小提琴

加：

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

您可以嘗試以下代碼：

演示

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