页面布局，我要如何撑开高度！

问题一：如何撑开页面高度

大部分网页高度都是由内容来撑开的高度，但是如果没有内容来撑开高度呢？设置固定值显然是不对的！我的主体内容高度要设置 height:100% 吗？高度百分比是相对与父级的，可是父级body也没有高度啊！

解决办法一：

//没有内容的情况下

<div class="main">我要撑开页面有高度</div>
style{
    .main{
       position:fixed;
       top:0;
       left:0;
       width:100%;
       height:100%;
    }
}

//有标题内容的情况下

<div class="title>标题</div>
<div class="main">我要撑开页面有高度</div>
style{
    .title{
       height:46px;
    }
    .main{
       position:fixed;
       top:46px;
       left:0;
       width:100%;
       height:calc(100% - 46px);
    }
}

说明：因为设置fixed固定定位高度是基于是视口的，所以我设置主体的高度100%也是基于视口的！但是标题是存在高度的，那么这个时候可以进行css的计算！

解决办法二：

//没有内容的情况下

<div class="main">我要撑开页面有高度</div>
style{
    .main{
       width:100%;
       height:100vh;
    }
}

//有标题内容的情况下

<div class="title>标题</div>
<div class="main">我要撑开页面有高度</div>
style{
    .title{
       height:46px;
    }
    .main{
       margin-top:46px;
       height:calc(100vh - 46px);
    }
}

说明：很喜欢的方法，1vh等于视口高度1%，那么100vh就是100%！