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

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. 使用Apache服务部署静态网站

    1970年,作为互联网前身的ARPANET(阿帕网)已初具雏形,并开始向非军用部门开放,许多大学和商业部门开始接入.虽然彼时阿帕网的规模(只有4台主机联网运行)还不如现在的局域网成熟,但是它依然为网络 ...

  2. 东软实习<2>

    学习过程及小节 Jdk在linux上的安装解压配置 Mysql的安装 配置 Tomcat的安装 配置 管理 SSH的安装 Notepad的连接与使用 对四大作用域及其范围进行了介绍 讲解了有关负载均衡 ...

  3. rem布局完成响应式开发，通俗且详细的原理解析和代码实现

    一.rem布局基本原理 原理:rem可以理解为一个长度单位,单位rem的值等于网页font-size的值.如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px. 根据 ...

  4. 数据库索引使用数据结构及算法, 及MySQL不同引擎索引实现

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  5. [Swift]LeetCode41. 缺失的第一个正数 | First Missing Positive

    Given an unsorted integer array, find the smallest missing positive integer. Example 1: Input: [1,2, ...

  6. [Swift]LeetCode349. 两个数组的交集 | Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  7. [Swift]LeetCode401. 二进制手表 | Binary Watch

    A binary watch has 4 LEDs on the top which represent the hours (0-11), and the 6 LEDs on the bottom ...

  8. shell 删除重复文件脚本

    摘自 <Linux Shell脚本攻略>一书,例子在109页,原理在110页,原理讲解的很好哦! 需要了解awk命令.xargs,脚本中所用的命令在Linux Shell脚本攻略一书中都有 ...

  9. BBS论坛（二十一）

    21.1.编辑轮播图功能完成 (1)cms_banners.html 把属性绑定到<tr>上面,方便找到各属性的值 <tbody> {% for banner in banne ...

  10. JavaDBF：保存行情实时数据到DBF文件

    JavaDBF.jar其实很早都不再更新了,在日新月异的科技圈算得上远古上神的jar包,早该身归混沌了. 但我们的项目要用到,因为之前做的大宗期货交易行情的分析文件依然是dbf文件,没有办法,还得用 ...