<!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. 为什么要使用Redis？ —— Redis实战经验

    (序言,从一张思维导图开始,慢慢介绍我自己关于Redis的实战经验) 现在很多互联网应用的服务端都使用到了Redis,到底大家为什么要用Redis呢?Redis有很多特性,比如高性能.高可用.数据类型 ...

  2. unity踩坑2020-01-21

    这几天一直在测试一个类似于传奇的2d界面游戏,目前做的测试为: 人物动作响应,主要是8方向的判断和资源文件精灵的刷新. 学到的知识点: 1,Enum.GetHashCode() 可以得到这个枚举的索引 ...

  3. 09 : 构造方法 & 代码块

    构造方法 概念 构造方法是一种特殊的方法,它是一个与类同名的方法 对象的创建就是通过构造方法来完成. 其功能主要是完成对象的创建或者对象的初始化 当类实例化new一个对象时会自动调用构造方法 构造方法 ...

  4. JS绑定事件处理函数及处理流程

    一.事件绑定的几种方式: 1.1 ele.on+“事件名“:如div.onclick = function(event){ }; 1.1.1这种方式兼容性非常好,但一个元素的同一个事件上只能绑定一个处 ...

  5. bookdown学习笔记

    主要参考大佬谢益辉的bookdown学习笔记 https://bookdown.org/yihui/bookdown/pandoc.html 灰常之详细 然后clone了他写好的小demo,准备自己试 ...

  6. 4.Docker 操作容器

    启动容器 所需要的命令主要为 docker run.例如,下面的命令输出一个 “Hello World”,之后终止容器. docker run ubuntu:16.04 /bin/echo 'Hell ...

  7. [USACO10MAR] 伟大的奶牛聚集 - 树形dp

    每个点有重数,求到所有点距离最小的点 就是魔改的重心了 #include <bits/stdc++.h> using namespace std; #define int long lon ...

  8. [HNOI2013] 消毒 - 二分图匹配

    容易发现 \(a,b,c\) 中至少有一个 \(\leq 17\) 不妨将其调剂为 \(a\),那么我们可以暴力枚举哪些 \(x\) 片片要被直接削掉,剩下的拍扁成二维情况 二维时,如果有一个格子是 ...

  9. Linux 环境c++ 编码转换

    #include <iconv.h> //代码转换:从一种编码转为另一种编码 static int CodeConvert(char *from_charset,char *to_char ...

  10. SMTS Silicon Design Engineer Location: Beijing, Beijing, CN

    https://jobs.amd.com/job/Beijing-Physical-Design-Engineer-Beij/603603700/?locale=en_US What you do a ...