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

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. C# WPF 使用委托修改UI控件

    近段时间在自学WPF,是一个完全不懂WPF的菜鸟,对于在线程中修改UI控件使用委托做一个记录,给自已以后查询也给需要的参考: 界面只放一个RichTextBox,在窗体启动时开起两个线程,调用两个函数 ...

  2. Dora.Interception，为.NET Core度身打造的AOP框架 [3]：多样化拦截器应用方式

    在<以约定的方式定义拦截器>中,我们通过对拦截器的介绍了Dora.Interception的两种拦截机制,即针对接口的“实例拦截”针对虚方法的“类型拦截”.我们介绍了拦截器的本质以及基于约 ...

  3. Xapian索引-文档检索过程分析

    本文是Xapian检索过程的分析,本文内容中源码比较多.检索过程,总的来说就是拉取倒排链,取得合法doc,然后做打分排序的过程. 1 理论分析 1.1  检索语法 面对不同的检索业务,我们会有多种检索 ...

  4. 智能压缩，摆脱用 Gzip 还是 Brotli 的纠结

    近日,又拍云上线了“智能压缩”功能,同时支持 Gzip 和 Brotli 压缩算法,在节约流量的同时,进一步减少用户的等待时间. CDN 流量问题一直以来是大家关注的重点,又拍云针对流量节约上线了一系 ...

  5. performance数据

    // 获取 performance 数据 var performance = { // memory 是非标准属性,只在 Chrome 有 // 财富问题:我有多少内存 memory: { usedJ ...

  6. SpringCloud中使用Hystrix

    1.  引言 一般而言,一个服务都是部署了多台机器的,那么在这种情况下,当其中一个服务挂了以后Hystrix是怎么处理的呢? 为了验证这个问题,我们准备两个服务:user-api 和 app-gate ...

  7. java基础(十六)----- equals()与hashCode()方法详解 —— 面试必问

    本文将详解 equals()与hashCode()方法 概述 java.lang.Object类中有两个非常重要的方法: public boolean equals(Object obj) publi ...

  8. 【朝花夕拾】Android性能篇之（四）Apk打包

    前言 APK,即Android Package,是将android程序和资源整合在一起,形成的一个.apk文件.相信所有的Android程序员是在IDE的帮助下,完成打包轻而易举,但对打包流程真正清楚 ...

  9. 带着新人学springboot的应用07（springboot+RabbitMQ 下）

    说一两句废话,强烈推荐各位小伙伴空闲时候也可以写写自己的博客!不管水平高低,不管写的怎么样,不要觉得写不好或者水平不够就不写了(咳,我以前就是这样的想法...自我反省!). 但是开始写博客之后,你会发 ...

  10. Kafka控制器选举流程剖析

    1.概述 平时在使用Kafka的时候,可能关注的更多的是Kafka系统层面的.今天来给大家剖析一下Kafka的控制器,了解一下Kafka控制器的选举流程. 2.内容 Kafka控制器,其实就是一个Ka ...