【HTML】添加一个自适应footer

最新推荐文章于 2022-05-19 16:36:08 发布

好吃吗

最新推荐文章于 2022-05-19 16:36:08 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/xhdxhdxhd/article/details/102791148

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

一个可调整的输入框和footer

|
|
–> 调整输入框大小后，footer自动下移

效果说明

所谓自适应的footer，就是指：footer的至多出现在网页底部，并且如果允许，总是出现在底部。

这就保证了：网页加载时，用户能够在最底部看到footer；如果网页内容高度发生变化，footer要么上移要么下移，上移不能超过底部之上，保证和内容的和平共处。

布局思路

这个布局的难点主要是内容自适应：内容不足窗口高度时，显示在底部；内容超过窗口是，显示在最底部。

最简单的思路可分为三个步骤：1.设置容器的最小空间 2.元素自动占据容器的剩余空间 3.定位到最底部

首先，要明白一点：网页显示时，就chrome浏览器而言，html和body的高度就是内容的大小。
通过将html的height设置成100%, html可以占据整个屏幕；但是body仍旧是内容大小；为此，可将body的大小也设置成100%.但是设置之后，body的大小不能发生变化，类似于上面的输入框扩大到最大大小后，无法扩大。此时，可将body的height换成min-height解决不可扩展的问题。

body默认情况下可能有margin，设置min-height为100%可能出现滚动条，因此设置其margin-top,margin-bottom均为0.

因此，为了解决网页加载时，body的大小没有占据屏幕大小的情况，设置:

html { height: 100% }
body { min-height: 100% }

通过将body铺满，然后我们可以使用flex的两个特性：1.定位特性，即通过设置align-items为flex-end,使元素自动定位到底部 2.使用flex-grow的特殊情况,当flex容器中只有两个元素时，如果其中一个元素没有设置flex-grow(或者为0),另外一个元素设置为任意值，则其将铺满剩余空间。

HTML代码

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml style="height: 100%">

<head>
    <title>Test Platform - An Adaptive Footer</title>

    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta charset="UTF-8">
</head>

<body style="min-height: 100%;margin-top: 0;margin-bottom: 0;display: flex;flex-direction: column">
<div id="content">
    <textarea placeholder="change my height"></textarea>
</div>
<footer style="text-align: center; flex-grow: 1;display: flex;align-items: flex-end;justify-content: center">
    <p>Designed by Fulton Shaw</p>
</footer>

</body>

</html>

好吃吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTML】添加一个自适应footer

效果图效果说明所谓自适应的footer，就是指：footer的至多出现在网页底部，并且如果允许，总是出现在底部。这就保证了：网页加载时，用户能够在最底部看到footer；如果网页内容高度发生变化，footer要么上移要么下移，上移不能超过底部之上，保证和内容的和平共处。布局思路这个布局的难点主要是内容自适应：内容不足窗口高度时，显示在底部；内容超过窗口是，显示在最底部。最简单的思...
复制链接

扫一扫