where interesting happend !

网站头部底部布局方法2

jimmy
我们继续说网站的布局另一种方式: flex 圣杯布局 ,这个方式我是学习阮一峰大神的flex文章后后,自己实战学习而来的。 关于 flex布局 ,可以看这个文章。

先看 html 基本机构:

<body>
   <div id="header">header</div>
   <div id="main">
     <div id="content">
       <p>123</p>
     </div>
   </div>
   <div id="footer">footer</div>
</body>

结构相对之前简洁了一些,把 wrap 去了。

再看下 css

body,p{
    margin: 0;
}
html,body{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
}
#main{
    padding-top: 65px;    /*数值和header的高一样*/
    flex: 1;
}
#header{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 65px;
    background-color:#fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 65px;
}
#footer{
    background-color: #fafafa;
    border-top: 1px solid #d9d9d9;
    height: 49px;
    text-align: center;
    line-height: 49px;
}

header footer 的东西都不变,主要是处理了 body main

根据我们的要求, footer 高度一定, main 的高度随内容的变化会被撑高,但是内容很少时,也要能达到把 footer 推到底边的效果。

具体做法如下:

  1. body 样式设置为 display: flex;flex-direction: column body 设置为纵向的弹性布局,它的直接子元素会以一个富于“弹性”的特性呈现出来。

  2. main 样式 flex:1 flex:1 它是 flex-grow: 1; flex-shrink: 1;flex-basis: 0%; 的缩写。我们探讨解下这三个“神秘“的属性。

    (1) flex-grow

    设置弹性盒的扩展比率。默认值是 0 ,表示不进行拓展。1 则它们将等分剩余空间(如果有的话)。

    所以我们这里的意思是, main 可用剩余空间 h = body 的高度 减去 footer 的高度。

    main 将和它的其他兄弟,正常属性的兄弟( header 为绝对定位所以不算),一起平分这个 h ,但是 main 就类似一个独生子,所以 h 就全是它的了。

    这个结果就是 即使 main 的内容很少时, main 仍然可以把高度撑到把 footer 推到底部.

    因此这里只要设置 flex-grow:1 就可以达到目的了,但是这个并不是我们常用的写法,因为其他两个值我们也常用到。

    (2) flex-shrink

    设置弹性盒的收缩比率。默认为 1 ,即如果空间不足,该项目将缩小。

    对于我们写响应式,这个属性也很有用。

    (3) flex-basis

    定义了在分配多余空间之前,项目占据的主轴空间

    我们这里没有设置分配前的高度。

    flex-basis 可以设为跟 width height 属性一样的值,则项目将占据固定空间。比如我们可以给 footer 设置 flex-basis:49px,效果等同于 height:49px

    两种布局就就这样介绍完了。

Comments

Proudly published with Hexo