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

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. SDKmanager的位置

    最近学习Android Studio 因为配置的问题,需要查找SDKmanager的位置 一下是查找方法: 查找到啦~

  2. python 视图 (FBV、CBV ) 、Request 和Response对象 、路由系统

    一.FBV和CBV1.基于函数的view,就叫FBV(Function Based View) 示例: def add_book(request): pub_obj=models.Publisher. ...

  3. Task 的用法

    Task的功能喝Thread类似,写法也很简单: 两种方式: 第一 Task t1=new Task(()=>{}); t1.Start();//启动Task t1.Wait();//若调用Wa ...

  4. gc笔记（转）

    GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...

  5. OSGi类加载流程

    思路 OSGi每个模块都有自己独立的classpath.如何实现这一点呢?是因为OSGi采取了不同的类加载机制: OSGi为每个bundle提供一个类加载器,该加载器能够看到bundle Jar文件内 ...

  6. [SQL]LeetCode185. 部门工资前三高的员工 | Department Top Three Salaries

    SQL 架构 Create table If Not Exists Employee (Id ), Salary int, DepartmentId int) Create table If Not ...

  7. [Swift]LeetCode242. 有效的字母异位词 | Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  8. [Swift]LeetCode292. Nim游戏 | Nim Game

    You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...

  9. P5241 序列

    分析 题目要求在一共加入若干条边是的不同B序列的个数:方便统计,我们不妨让一个B序列对应一种特定的操作来构造,具体如下 从1开始按从小到大加入点,始终维护一个顺序为加点次序的链:每次加入一条有向边 不 ...

  10. MySQL开启远程连接权限

    对于我们刚开始安装的mysql或者mariadb来说,默认是不开启远程连接的.所以需要我们手动开启远程连接的权限.如果你是使用docker安装mysql那需要先进入容器中,这里就不讲如何进入容器了,百 ...