相信很多前端工程师在开发页面时会遇到这个情况：当整个页面高度不足以占满显示屏一屏，页脚不是在页面最底部，用户视觉上会有点不好看，想让页脚始终在页面最底部，我们可能会想到用：

1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏，但是大型网站页面比较多的情况下footer都是模块化添加进去的，每个页面高度都不会一样，不可能去设置每个页面中间内容区min-height高度，而且用户的显示屏的大小都不一样，无法精确设置min-height高度，无法保证用户看到页面页脚不是在最底部或页面不出现滚动条；

2.页脚固定定位：页脚相对于body固定定位会显示在最底部，但是页面有滚动条时，页面滚动，页脚会悬浮在内容区上，可能以上都不是你想要的效果。

可以用下实例方法解决你的问题：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>猿来是勇者</title>

    </head>

   <!--方法一-->

    <style>

        *{margin: ; padding: ;}

        html,body{height:%;}

        #container{position:relative; width:%; min-height:%;padding-bottom: 100px; box-sizing: border-box;}

        header{width: %; height: 200px; background: #;}

        .main{width: %; height: 200px; background: orange;float:left;}

        footer{width: %; height:100px; /* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background: #;}

    </style>

    <body>

        <div id="container">

            <header>HEADER</header>

            <section class="main">MAIN</section >

            <footer>FOOTER</footer>

        </div>

    </body>

    <!--方法二-->

    <!--<style>

        *{margin: ; padding: ;}

        html,body{height: %;}

        #container{display: flex; flex-direction: column; height: %;}

        header{background: #; flex:   auto;height:100px;}

        .main{flex:   auto;}

        .bg{background:orange;height:200px;}

        footer{background: #; flex:   auto;height:100px;}

    </style>

    <body>

        <div id="container">

            <header>HEADER</header>

            <section class="main">

                <div class="bg">MAIN</div>

            </section>

            <footer>FOOTER</footer>

        </div>

    </body>-->

</html>
 

页面内容不够高footer始终位于页面的最底部的更多相关文章

  1. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  2. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  3. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  4. 在不适用fixed的前提下，当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  5. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  6. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  7. PHP curl获取页面内容，不直接输出到页面，CURLOPT_RETURNTRANSFER参数设置

    使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的或true. 1.curl获取页面内容, 直接输出例子: <?php $ ...

  8. footer部分，当页面主题内容不满一屏时，始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  9. javascript实现页面右侧在线客服始终跟随鼠标滚动而上下滚动且始终位于屏幕中间

    效果如图,右侧的联系一栏始终位于页面的中间位置,且随着页面的上下滚动而滚动跟随 css的话没什么好说的,看图 代码 window.onload=window.onresize=window.onscr ...

随机推荐

  1. 接口自动化项目搭建（Java+testng+maven+git+springboot）

    自动化测试: https://www.bilibili.com/video/av31078661?from=search&seid=16551153777362561361 一工具准备 二 环 ...

  2. DCOS实践分享(3)：基于Mesos 和 Docker 企业级移动应用实践分享

    2016年1月24日 8:00—19:00 北京万豪酒店(东城区建国门南大街7号) @Container大会是由国内容器社区DockOne组织的专为一线开发者和运维工程师设计的顶级容器技术会议,会议强 ...

  3. 通过CMD将文件copy到远程电脑

    net use \\192.168.1.112\ipc$ admin /user:admin #第一个admin是密码,第二admin是用户名: xcopy test.txt \\192.168.1. ...

  4. Android 音视频开发(一) : 通过三种方式绘制图片

    版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/7456956.html 在 Android 音视频开发学习思路 里面,我们写到了,想要逐步入门音视频开发,就 ...

  5. Python爬取房产数据，在地图上展现！

    小伙伴,我又来了,这次我们写的是用python爬虫爬取乌鲁木齐的房产数据并展示在地图上,地图工具我用的是 BDP个人版-免费在线数据分析软件,数据可视化软件 ,这个可以导入csv或者excel数据. ...

  6. django启动server报错Error: That port is already in use.

    这种一般是端口错误,一般是要把端口关掉,这里提供了两种方法. 方法一:直接命令: sudo lsof -t -i tcp:8000 | xargs kill -9 方法二:脚本:名字manage.py ...

  7. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  8. HBase篇--HBase操作Api和Java操作Hbase相关Api

    一.前述. Hbase shell启动命令窗口,然后再Hbase shell中对应的api命令如下. 二.说明 Hbase shell中删除键是空格+Ctrl键. 三.代码 1.封装所有的API pa ...

  9. 深入理解OkHttp源码（三）——网络操作

    这篇博客侧重于了解OkHttp的网络部分,包括Socket的创建.连接,连接池等要点.OkHttp对Socket的流操作使用了Okio进行了封装,本篇博客不做介绍,想了解的朋友可以参考拆轮子系列:拆O ...

  10. php的四个fetch语句

    先给一个表 man: |---------------| |-name--|-age--| |--AA---|--aa---| |--BB---|--bb---| |--CC---|--cc---| ...