让底部始终在浏览器底部

当内容不足够高时，使footer始终处于底部，其中一种方法

html代码

<div class="wrapper"><div class="content">content</div><div class="push"></div>
</div>
<footer class="footer"></footer>

css样式

html,body{ height: 100%; margin: 0; }
.wrapper{min-height: 100%;margin-bottom: -50px;
}
.footer,.push{ height: 50px; }
.footer{ background: green; }

这个代码需要一个额外的元素.push等于底部的高度，来防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。

转载于:https://www.cnblogs.com/qiye2016/p/5806984.html

让底部始终在浏览器底部相关推荐

footer属性css,CSS基础-footer元素始终粘在浏览器底部的四种方法
本文介绍底部footer元素如何始终粘在浏览器底部.当内容container足够多.可以撑开一屏的时候,底部footer紧跟在内容container后边:而内容container不够多.不足以撑开一屏 ...
html 停留页面底部,HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位旋转 ...
html里按钮始终在底部,详解footer始终位于网页底部的方法介绍
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
实现自适应位置--footer紧贴浏览器底部
1)实现自适应位置的footer,页面内容较少时,footer需要紧贴浏览器底部 2)解决IE6下的页面滚动条与其他浏览器不一致的问题紧贴浏览器底部 111111111111111 22222222 ...
vue watch 修改滚动条_Vue.js 中滚动条始终定位在底部的方法
Vue.js 中滚动条始终定位在底部的方法发布于 2020-2-23| 复制链接分享一篇关于vue 中滚动条始终定位在底部的方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看看吧滚 ...
vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
CSS实现页脚始终在页面底部
说明最近在布局自己的博客系统,我是想练练手把时下比较流行的前后端技术串起来.同时,我会把设计和编码过程中遇到的问题或值得分享的技术点.实现方式做下总结,记录下来.本篇就是第一篇,个人能力有限,不足之 ...
Vue3 移动端浏览器底部工具栏挡住部分网页，以及ios网页放大滑动问题。
ios网页放大问题,一般来说点击input框会放大.或者双指缩放.这个非常影响用户体验. 解决方法:在index.html中,添加meta标签. <meta name="viewpor ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...

让底部始终在浏览器底部

让底部始终在浏览器底部相关推荐

最新文章

热门文章