<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    *{

        margin:;

        padding: ;

    }

    html,body{

        height: %;

    }

    #container{

        width: %;

        min-height: %;

        padding-bottom: 50px; /*底部空出50px，放footer*/

        position: relative;

        box-sizing: border-box; /*效果：padding后不改变其宽高*/

    }

    .nav{

        /*最上面的div不能有margin-top，不然会造成整个body下移*/

        width: %;

        height: 50px;

        background-color: blue;

    }

    .main{

        width: %;

        height: 400px;

        background-color: red;

    }

    .footer{

        height:50px;

        background-color: yellow;

        position: absolute; /*相对于#container固定定位*/

        left: ;

        bottom: ;

        width: %;

    }

</style>

<body>

    <div id="container">

        <div class="nav"></div>

        <div class="main"></div>

        <div class="footer"></div>

    </div>

</body>

</html>

css的理解 ----footrt固定在底部的更多相关文章

  1. css样式控制元素固定在底部

    回复固定在底部:css样式用到了 box-sizing属性 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webk ...

  2. CSS布局:让页底内容永远固定在底部

    我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...

  3. HTML5+CSS把footer固定在底部

    在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...

  4. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  5. 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动

    一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...

  6. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  7. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...

  8. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  9. input固定在底部

    // input固定在底部//isFocusing获取焦点:true 失去焦点:false _onTouchInput(isFocusing){ this.phone_width = screen.w ...

随机推荐

  1. 五、JVM之堆内存

    堆结构分代图 堆结构分代的意义 Java虚拟机根据对象存活的周期不同,把堆内存划分为几块,一般分为新生代.老年代和永久代(对HotSpot虚拟机而言),这就是JVM的内存分代策略. 堆内存是虚拟机管理 ...

  2. 最大流算法之Ford-Fulkerson算法与Edmonds–Karp算法

    引子 曾经很多次看过最大流的模板,基础概念什么的也看了很多遍.也曾经用过强者同学的板子,然而却一直不会网络流.虽然曾经尝试过写,然而即使最简单的一种算法也没有写成功过,然后对着强者大神的代码一点一点的 ...

  3. 使用Beautiful Soup爬取猫眼TOP100的电影信息

    使用Beautiful Soup爬取猫眼TOP100的电影信息,将排名.图片.电影名称.演员.时间.评分等信息,提取的结果以文件形式保存下来. import time import json impo ...

  4. MongoDB批量更新和批量插入的方式

    最近,在调试代码中发现向MongoDB插入或者更新文档记录时若是多条的话都是采用for循环操作的,这样的处理方式会造成数据操作耗时,不符合批量处理的原则:对此,个人整理了一下有关MongoDB的批量更 ...

  5. [Python]BeautifulSoup标签的遍历

    1.下行遍历 标签树的下行遍历.content 子节点列表,将tag所有儿子节点存入列表.children 子节点的迭代类型,与.contents类似用于循环遍历儿子节点.descendants 子孙 ...

  6. yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题

    yolov3 进化之路,pytorch运行yolov3,conda安装cv2,或者conda安装找不到包问题 conda找不到包的解决方案. 目前是最快最好的实时检测架构 yolov3进化之路和各种性 ...

  7. 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. python之路正则表达式

    元字符 蓝色框中有非贪婪模式也不起作用,非贪婪模式在+后加上?号 有空字符串

  9. 记录 shell学习过程（9）正则表达式 转自树明聊运维

    正则表达式 正则表达式介绍 特殊字符 POSIX特殊字符 一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符") ...

  10. 【HTML】iframe嵌套界面自适应，可高度自由收缩

    最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个 HTML: <div class="main_page"> <i ...