HTML的footer置于页面最底部

vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的

方法是:footer高度固定+绝对定位

<html>
  <head>
  </head>
  <body>
    <div class="header">header</div>
    <div class="main">main content</div>
    <div class="footer">footer</div>
  </body>
</html>
<style >
  .header{background-color: #ffe4c4;}
  .main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
  .footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}
</style>
 

http://www.cnblogs.com/pinganzi/p/6383487.html

原文地址:https://www.cnblogs.com/wayneliu007/p/10324279.html

时间: 2024-10-14 04:36:02

HTML的footer置于页面最底部的相关文章

HTML的footer置于页面最底部的方法

需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端. 思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留footer的高度. Html代码   <!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-content"> </div&

footer 置于页面底部的不解

网上关于如何将 footer 置于页面底部的文章太多了,我也照着做了几个,但效果不理想,总是有各种各样的问题. 一般的原理都是将 footer 的相对于包含元素绝对定位,而包含元素的高度为百分比. 原理很清晰,但我总是看不懂那些案例的代码. 我试着按照这个原理,自己写了一个,发现在 Chrome 39 和 IE11 下都能正常运作. HTML: <body>...<div class="wrapper"> </div> <footer>.

网站设计:将Footer固定在浏览器底部

在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fixFooter(){    var mainHeight = document.getElementById('main').offsetHeight;    var  height = document.documentElement.clientHeight                   

各种height 以及判断滚动条是否已拉到页面最底部

DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器

IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部 DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,do

页脚保持在未满屏页面的底部

最近有这样一个需求,就是说在页面内容不够丰富的情况下,我们得让页脚始终保持在页面的底部. bala,bala... 在网上寻觅了一下,最终还是赏识用js解决的这款. 不闲扯,贴码show html部分 <body> <div id="top">top</div> <div id="bottom">bottom</div> </body> css部分 *{ margin:0; padding:0;

让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html,body { height: 100%; padding: 0; margin: 0; text-align: center; } #container { min-height: 10

gulp将header/footer引入页面

前言:在写静态页面的时候,公共的头部和底部or侧边栏一样,每写一个页面,都要复制粘贴,每当修改后,还要对原先的header.footer修改,这及其麻烦:不更新,部分效果又看不到影响总体效果. 解决:用gulp的插件可以将header.footer.sidebar的静态页面引入每一个需要的页面,只需要写一段注释,编译时,会在注释内将header.footer.sidebar模板页面插入.比如: 替换后每次修改,每个引入的页面都会修改 需要用到的模块有:gulp.fs.gulp-replace这三

sticky footer布局,定位底部footer

其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sticky footer</title> <style type="text/css"> /* 第一