CSS 全屏布局

🌙
手机阅读
本文目录结构
axihe

(1)使用position实现▲

html代码:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

css代码:

html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {border: 1px solid #000;}
#top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
}
#left {
    position: absolute;
    top: 100px;  /*值大于等于#top的高度*/
    left: 0;
    bottom: 50px;  /*值大于等于#bottom的高度*/
    width: 200px;
}
#right {
    position: absolute;
    overflow: auto;
    left: 200px;  /*值大于等于#left的宽度*/
    right: 0;
    top: 100px;  /*值大于等于#top的高度*/
    bottom: 50px;  /*值大于等于#bottom的高度*/
}
#bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}

原理:计算好盒子的宽度和间隔去设置位置

优缺点:

优点:容易理解;兼容性好 缺点:代码繁多;需要计算好各个盒子的位置;

(2)使用flex实现

html代码:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="middle">
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
</div>
</body>

css代码:

*{
    margin: 0;
    padding: 0;
}
html,body,#parent{height:100%;}
#parent {
    display: flex;
    flex-direction: column;
}
#top {height: 100px;}
#bottom {height: 50px;}
#middle {
    flex: 1;
    display: flex;
}
#left {width: 200px;}
#right {
    flex: 1;
    overflow: auto;
}

原理:flex设置排列方式、对齐方式罢了,请查阅文末flex阅读推荐

优缺点

优点:简单灵活;功能强大 缺点:PC端兼容性不好,移动端(Android4.0+) flex务必带上兼容,写法请参考文末阅读推荐,也可以使用autoprefixer

(3)使用Grid实现

html代码:

<body>
<div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
</div>
</body>

css代码:

*{
    margin: 0;
    padding: 0;
}
html, body, #parent {
    height: 100%;
}
#parent {
    width: 100%;
    height: 100%;
    display: grid;
    /*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
    grid-template-columns: 200px 1fr;  
    /*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
    grid-template-rows: 100px auto 50px; 
    /*定义网格区域分布*/
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
}
#parent>div{border: 1px solid #000;}
#top{grid-area: header;  /*指定在哪个网格区域*/}
#left{grid-area: aside;  /*指定在哪个网格区域*/}
#right{grid-area: main;  /*指定在哪个网格区域*/}
#bottom{grid-area: footer;  /*指定在哪个网格区域*/}

原理:css grid布局,请查看文末的阅读推荐

优缺点

优点:灵活划分网格区域;新型布局利器,适用于页面三维布局 缺点:兼容性不好,移动端(Android5.0+)

清浮动

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>清除浮动</title>
       <style>
          .div1{
              width: 500px;
              border:3px solid #999999;
          }
          .div2{
              width: 200px;
              height: 200px;
              background-color: green;
              float: left;
          }
          .div3{
            width: 200px;
            height: 300px;
            background-color: pink;
            float: left;
          }
          /* 清浮动 */
          .clfolat:after{
              content: "";
              display: block;
              clear: both;
          }
       </style>

    </head>

    <body>
        <!-- 清除浮动的样式 要加在 浮动元素的父元素上 -->
       <div class="div1 clfolat">
           <!-- 元素浮动的时候,脱离常规的文档流,不占据原来的空间了 -->
           <div class="div2"></div>
           <div class="div3"></div>
       </div>
       <p>jigoewjiogjoi</p>

    </body>

</html>


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang