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

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. FBOSS: Building Switch Software at Scale

    BOSS: 大规模环境下交换机软件构建 本文为SIGCOMM 2018 论文,由Facebook提供. 本文翻译了论文的关键内容. 摘要: 在网络设备(例如交换机和路由器)上运行的传统软件,通常是由供 ...

  2. 业务配置开发平台qMISPlat 2.0 产品介绍

    qMISPlat是什么 qMISPlat(业务配置开发平台)是一套基于.net core 2.0.跨平台的,面向开发人员和具有一定技术水平的业务人员使用的业务配置开发平台.基于此平台您只需通过配置和少 ...

  3. JS中的特殊类别注意区分

    undefined和null 在JavaScript中存在这样两种原始类型:Null与Undefined. 这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是 ...

  4. [Swift]LeetCode967. 连续差相同的数字 | Numbers With Same Consecutive Differences

    Return all non-negative integers of length N such that the absolute difference between every two con ...

  5. springboot 实战之一站式开发体验

    都说springboot是新形势的主流框架工具,然而我的工作中并没有真正用到springboot: 都说springboot里面并没有什么新技术,不过是组合了现有的组件而已,但是自己却说不出来: 都说 ...

  6. Qt创建分割窗口

    1.QT中QSplitter类可以用来灵活分割窗口,从而产生可用的布局,在以后进行界面布局很有用. 2.先看代码,这个分割窗口按顺序添加子窗口: #include "mainwindow.h ...

  7. 性能调优之Transformation

    优化之Aggregator组件 优化之Custom组件 优化之Joiner组件 优化之Lookup组件 优化之Normalizer组件 优化之Sequence Generator组件 优化之Sorte ...

  8. 【Redis篇】Redis持久化方式AOF和RDB

    一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB)   hdfs:    fsimageAOF(AppendOnlyFile)   ...

  9. Python内置函数(31)——id

    英文文档: id(object) Return the “identity” of an object. This is an integer which is guaranteed to be un ...

  10. Windows Server 2012安装mysql5.7.24记录

    系统环境: 一.下载mysql5.7.24安装包 地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载解压到相应的目录,我的路径 ...