页面布局,我要如何撑开高度!

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

大部分网页高度都是由内容来撑开的高度,但是如果没有内容来撑开高度呢?设置固定值显然是不对的!我的主体内容高度要设置 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%!

猜你喜欢

转载自blog.csdn.net/weixin_43906597/article/details/109570320
今日推荐