前端必看的8个HTML+CSS技巧 (1)

1. 固定底部内容

这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。

这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。当内容超出了浏览器窗口高度，就会随着内容往后推。

在有CSS3之前，实现这个效果是颇有难度的。浏览器窗口高度是会根据不同用户打开浏览器的情况，屏幕大小的差异和浏览器的缩放比例而变。我们需要借助JavaScript来实时获取浏览器高度进行运算才能实现。虽然说标题是说“固定”底部，但是我们想要的效果不是position: fixed。使用固定定位，在内容高于窗口高度时，就会挡住我们的内容。

随着CSS3的来临，最完美的实现方式是使用Flexbox。实现的关键就是使用不太被关注的flex-grow属性，可以在我们的内容标签元素（比如div）中使用。在我们下面的例子里使用了main标签。

我来讲解一下实现原理吧。

flew-grow是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。如果我们使用flex-grow: 0，那这个flex元素就完全不会扩展了。所以我们需要把头部和底部之间的内容标签元素设置为flex-grow: 1或者flex-grow: auto，这样内容部分就会自动填充满头部和底部之外的所有空间。

为了避免底部内容受内容部分扩充空间的影响，我们给footer底部元素flex-shrink: 0属性。flex-shrink的作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间，这里我们给了flex-shrink: 0就是为了底部footer的大小不受影响。

我们直接上HTML和CSS代码看看是怎么实现的。

<div id="document">
  <nav>
    <h1>头部内容</h1>
  </nav>
  <main>
    <p>可以添加更多内容看看底部的变化哦！</p>
  </main>
  <footer>
    <h1>底部内容</h1>
  </footer>
</div>

#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}


nav, footer {
    background: #494949;
    display: flex;
    justify-content: center;
}


main {
    color: #bdbdbd;
    flex: auto;
}


footer {
    flex-shrink: 0;
}


* {
    margin: 0;
}


h1,
p {
    padding: 15px;
}


nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}


footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px #00000080;
}

🌟知识点总结：

• flex-grow — 是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间

• flex-shrink — 作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间