几种css全屏布局的解决方案

原创 2018年04月17日 15:00:27

上下定高满屏布局

此类布局在工作中是非常常见,常用于管理平台
这里写图片描述

1、absolute

<style>
    *{
        padding:0;
        margin:0;
    }
    html,body,.content{
        height:100%;
    }
    .top,.bottom{
        position: absolute;
        height: 50px;
        background-color: red;
        left: 0;
        right: 0;
    }
    .top{
        top:0;
    }
    .bottom{
        bottom:0;
    }
    .center{
        position: absolute;
        top: 50px;
        bottom: 50px;
        left: 0;
        right: 0;
        background-color: antiquewhite;
        overflow: auto;
    }
</style>
<div class="content">
    <div class="top">定高</div>
    <div class="center">自适应</div>
    <div class="bottom">定高</div>
</div>

2、函数calc()
calc() = calc(四则运算) #用于计算动态值
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;

calc 在低版本浏览器下存在兼容性问题:
这里写图片描述

<style>
    *{
        padding:0;
        margin:0;
    }
    html,body,.content{
        height:100%;
    }
    .top,.bottom{
        height:50px;
        background-color:red;
    }
    .center{
        height: calc(100% - 100px);;
        background-color: antiquewhite;
        overflow: auto;
    }
</style>
<div class="content">
    <div class="top">定高</div>
    <div class="center">自适应</div>
    <div class="bottom">定高</div>
</div>

3、flex
使用flex进行全局布局时,会因为性能问题出现,出现卡断。

<style>
    *{
        padding:0;
        margin:0;
    }
    html,body,.content{
        height:100%;
    }
    .content{
        display: flex;
        flex-direction: column;
    }
    .top,.bottom{
        height:50px;
        background-color:red;
    }
    .center{
        display: flex;
        flex: 1;
        background-color: antiquewhite;
        overflow: auto;
    }
</style>
<div class="content">
    <div class="top">定高</div>
    <div class="center">自适应</div>
    <div class="bottom">定高</div>
</div>

4、grid
使用display:grid把容器元素定义为一个网格,使用grid-template-columns和grid-template-rows设置列和行大小,然后使用grid-column 和 grid-row把它的子元素放入网格

<style>
    *{
        padding:0;
        margin:0;
    }
    html,body,.content{
        height:100%;
    }
    .content{
        display: grid;
        grid-template-rows: 50px auto 50px;
    }
    .top,.bottom{
        height:50px;
        background-color:red;
    }
    .center{
        overflow: auto;
        background-color: antiquewhite;
    }
</style>
<div class="content">
    <div class="top">定高</div>
    <div class="center">自适应</div>
    <div class="bottom">定高</div>
</div>

内容较少时,页面的footer始终显示在底部,内容超过一屏时,放在内容后面

常用于底部网站商标,备案号、页脚布局。
这里写图片描述

<style>
    *{
        padding:0;
        margin:0;
    }
    html,body{
        height:100%;
    }
    .page-container{
        min-height: 100%;
        position: relative;
    }
    .page-main{
        width: 100%;
        padding-bottom: 50px;
        height: auto;
        overflow: hidden;
    }
    .footer{
        position: absolute;
        bottom: 0;
        left: 0;
        right:0;
        height:50px;
        background-color:red;
    }
</style>
<div class="page-container">
    <div class="page-main"></div>
    <!--<div style="height:2000px;">内容过多时</div>--> 
    <div class="footer"></div>
</div>

案例十四、css3和fullpage实现全屏滚动

首先说一下fullpage,它是一个jquery的插件,用来实现鼠标向上向下滑动,就会自动切换到上一屏或者下一屏,对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。 总共有四...
  • csdn_zsdf
  • csdn_zsdf
  • 2017-05-05 10:58:24
  • 1005

前端组件库大合集-必备收藏

来源:http://www.xuanfengge.com/he-sets-the-front-end-component-library-the-essential-collection.html ...
  • gtd03
  • gtd03
  • 2015-09-08 17:47:58
  • 4988

css--全屏布局解决方案

之前写了几个居中布局的例子,同时也提到了对于页面的全屏布局。这里详细总结两种常见的全屏布局的案例,当然,实际上还有像Grid这样的方案,但是因为目前还不稳定,只是作为W3C的一个草案,兼容性自然就差一...
  • aaa333qwe
  • aaa333qwe
  • 2017-09-09 13:53:01
  • 262

CSS全屏布局的5种方式

http://www.cnblogs.com/xiaohuochai/p/5458068.html
  • Fanbin168
  • Fanbin168
  • 2016-05-05 14:14:03
  • 1008

<em>全屏</em>整屏滚动<em>组件</em>fullPage

javascript <em>全屏</em>整屏滚动<em>组件</em>fullPage ,结合 <em>css</em>3的各种效果 综合评分:0 收藏评论举报 所需: 3积分/C币 下载个数: 3 开通VIP 立即下载 ...
  • 2018年04月18日 00:00

前端组件库大合集

本文包含搭建web app常用的样式/组件等收集列表(移动优先),推荐mark!
  • qq_34838643
  • qq_34838643
  • 2018-01-24 17:43:31
  • 119

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安...
  • FungLeo
  • FungLeo
  • 2016-03-06 00:21:13
  • 7133

css的3种布局方式

1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。 2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015-10-14 20:18:02
  • 2992

fullpage全屏/整屏滚动组件简单实例Demo

fullpage全屏/整屏滚动组件简单实例Demo 鼠标滚动可以切换div模块
  • u014175572
  • u014175572
  • 2015-12-17 11:20:52
  • 3569

【译】CSS实现响应式全屏背景图

http://www.html-js.com/article/translation-front-Porter-CSS-implementation-response-type-full-screen...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2015-10-21 08:35:00
  • 548
收藏助手
不良信息举报
您举报文章:几种css全屏布局的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)