网页最下面的内容变成页脚紧贴在底部"/>
让网页最下面的内容变成页脚紧贴在底部
让网页最下面的内容变成页脚紧贴在底部
2016-10-10 13:31 网页设计 标签：css 1414 发表评论在网页设计中，存在一个相当古老又相当常见的问题，它是前段工程师绕不开的坎：有一个具有块级样式的页脚，当页面内容足够长时它一切正常，当页面较短时就会出现如图所见的问题。此时的问题在于，页脚不能像我们期望中那样紧贴在视口的底部，而是紧跟在内容的下方。
这个问题不仅普遍存在，而且初略看起来确实相当简单。因此，在所有“隐藏大坑”式的难题中，它简直就是教科书般的典型案例。不仅如此，CSS2.1基本上拿它没有办法：几乎所有的经典解决方案都需要给页脚设置固定的高度，而这显然是不健壮的，也是不实际的。
固定高度的解决方案
我们这个案例中大概的架构代码如下：
<header><nav>...</nav> </header> <main><!-- 正文内容 --> </main> <footer><p>将这个网站分享给你的朋友吧</p><p>...</p> </footer>
现在，让我们把页脚沉底吧。首先，我们计算出底部模块和顶部导航条的高度(假设是7em和2.5em)，那么为了满足页脚最好的贴合在网站的底部，我们可以给内容设置一个最小高度：
main{min-height:calc(100vh - 2.5em - 7em);box-sizing:border-box;/* 避免内边框或外边框搞乱高度的计算 */
} 你也可以把<header>、<main>元素装在一个容器里，然后在算式上只考虑页脚的高度了：
#wrapper{min-height:calc(100vh - 7em);
} 这个方法是有效的，而且它似乎比那些需要固定高度的方案还要好一些，主要好在它的代码极其简单。不过，如果页面布局不是那么简单的话，那这个方法完全不使用了。它不仅要求我们确保页脚内的文本永远不会折行，而且每当我们改变页脚的尺寸，都需要跟着调整min-height的值。
Flexbox方案
Floxbox对于此类问题同样是完美的选择，只要几行简单代码就能达成十分灵活的布局效果，而且完全不需要复杂的计算或者添加多余的HTML元素等。
首先，我们需要对<body>元素设置display:flex;，因为它是这三个主要区域的父元素，当父亲元素或者这个属性后，就可以对其子元素触发“伸缩盒布局模型”。我们还需要把flex-flow设置为column，否则子元素会被水平排放在一行上。
body{display:flex;flex-flow:column;
} 下面我们开始释放它的魔力了，首先我们把<body>的min-height属性指定为100vh，这样让它至少会占据整个视口高度。现在其实还没有看出变化，因为我们虽然指定了最小高度，但每个子元素的高度仍然以各自的内容为准的。
此时我们所期望的是，页头和页脚的高度由其内部因素来决定，而内容区块的高度应该可以自动伸展并占满所有的可用空间。我们只要给<main>这个内容的flex属性指定一个大于0的值，就可以实现这个效果了。
body{display:flex;flex-flow:column;min-height:100vh;
}
main{flex:1;} 这样就可以了，我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。Flexbox是不是很霸气。
更多推荐
让网页最下面的内容变成页脚紧贴在底部
发布评论