2全屏布局<9>

全屏布局的特点: 1.布局撑满窗口,当浏览器变大的时候,布局也是充满浏览器的窗口 2.滚动条出现在内容区域

2种解决方案 position flex

第一种方式position

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body,.box{
            width: 100%;
            overflow: hidden;
          /*把滚动条禁掉,即使内容超出宽高,也不会超出*/
        }
        .top{
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: pink;
        }
        .left{
            width: 200px;
            position: absolute;
            left: 0;
            top: 100px;
            bottom: 50px;
            background: greenyellow;
        }
        .right{
            position: absolute;
            left: 200px;
            top: 100px;
            right: 0;
            bottom: 50px;
            background: blueviolet;
            overflow: auto;
        }
        .bottom{
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background:black;
        }
        .right .inner{
            height: 2000px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="left"></div>
    <div class="right">
        <div class="inner"></div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>

第一种方式也也以实现百分比缩放的效果,在这里就不写了。下面是flex的百分比的形式。 第二种解决方案

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body,.box{
            height: 100%;
            overflow: hidden;
        }
        .box{
            display: flex;
            flex-direction: column;
        }
        .top{
            height: 10%;
            background: pink;
        }
        .center{
            flex: 1;
            background: yellow;
            display: flex;
        }
        .left{
            width: 20%;
            background: red;
        }
        .right{
            flex: 1;
            overflow: auto;
        }
        .bottom{
            height: 5%;
            background: black;
        }
        .right .inner{
            height: 2000px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="center">
        <div class="left"></div>
        <div class="right">
            <div class="inner"></div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2.布局解决方案- 等分<7>

    河湾欢儿
  • 2.布局解决方案- 等高<8>

    河湾欢儿
  • 2.布局解决方案 一列不定宽+一列自适应<5>

    河湾欢儿
  • 剖析一些经典的CSS布局问题,为前端开发+面试保驾护航

    这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后,它有着块级元素的一些性质例如可以设置宽高等,但它与inline-blo...

    桃翁
  • 八种创建等高列布局【出自w3c】

    高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

    用户3055976
  • 模板引擎(比如ejs)中如何显示markdown语法编写的内容

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    acoolgiser
  • 一天带你入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    用户1518699
  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • 讲一下怎么区分伪类、伪元素,同时优雅的处理页面浮动的问题

    首先介绍一下什么是伪类:伪类其实我们经常用的到,只是我们自己不会刻意的说这个是伪类这样的一个东西,我下面简单的举个例子就明白了怎么回事

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券