这个布局有问题，如何拉伸渐变并将主div移动到中心？

Question

目前，我在下面链接了我的JSfiddle。

我的水平渐变工作，完全拉伸。但是我的垂直渐变只延伸到文本的底部，我真的希望它延伸到页面的底部。我使用的任何高度代码都不起作用。

我也试图让'main'课程中的所有内容都集中在一起。除非我手动文本它不起作用。我尝试在CSS中将高度和宽度设置为auto，但id不执行任何操作。

有人可以帮我把这个页面正确对齐吗？

我希望这张照片中有什么：http://imgur.com/9F5wLak

标题（渐变）

导航（渐变）|主要内容在中间

页脚

http://jsfiddle.net/nejhrfjz/4/

这是我目前的CSS：

.gradient {
background-image:
linear-gradient(
 to right, 
 #276BE7 50% , #3079E7, #ffffff
);
margin:0;
display:inline-block;
width: 100%;
}

.gradientb {
background-image:
linear-gradient(
 to bottom, 
 #276BE7 , #3079E7, #ffffff
);
margin:0;
display:inline-block;
height: 100%;
}
body {
margin: 0;
background-color: #000000
}

nav {
margin:0;
}

#main {
float: left;
color: yellow;
width: 80%;
}

Answer 1

要使#main文本居中，CSS规则应如下所示：

#main {
    color: blue;
    text-align:center;
    background-color: #000000;
    display:block;
    margin:0 auto;
    }