#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

重点是要top和bottom一起使用，这是很反常规的用法，可以强制定义盒模型的区域，神奇啊

CSS样式让元素填充剩余部分为自己的高度或宽度的更多相关文章

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

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

  2. python + selenium webdriver 复合型css样式的元素定位方法

    <div class="header layout clearfix"></div> 当元素没有id,没有name,没有任何,只有一个class的时候,应该 ...

  3. css样式---隐藏元素

    1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...

  4. 获取元素CSS样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 前端开发HTML&css入门——盒子模型以及部分CSS样式

    CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里.• 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.• 我们只需要将相应的盒子摆放到网页中相 ...

  6. css样式显示省略号

     用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...

  7. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  8. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

随机推荐

  1. 【读书笔记】《深入浅出nodejs》第二章 模块机制

    1.什么是模块? 指在程序设计中,为完成某一功能所需的一段程序或子程序:或指能由编译程序.装配程序等处理的独立程序单位:或指大型软件系统的一部分. ----<百度百科> 2.JavaScr ...

  2. Spring中Bean生命周期

    Spring中的bean生命周期是一个重要的点,只有理解Bean的生命周期,在开发中会对你理解代码是非常有用的.对于Bean的周期,个人认为可以分为四个阶段.第一阶段:Bean的实例化,在该阶段主要是 ...

  3. Tomcat access log配置（二）

    前次讨论了spring boot 中添加Tomcat access log 是轻松愉快,配置文件中添加server.tomcat.accesslog即可,那么如果是外置的Tomcat容器又该如何配置呢 ...

  4. How To Use Coordinates To Extract Sequences In Fasta File

    [1] bedtools (https://github.com/arq5x/bedtools2) here is also bedtools (https://github.com/arq5x/be ...

  5. Vue2.0 + ElementUI的+ PageHelper实现的表格分页

    参考博客:http://blog.csdn.net/u012907049/article/details/70237457 借鉴1.controller层编写 2.vue中,axios的写法(总页数等 ...

  6. L1-3 宇宙无敌加法器 - 令人激动的一道题目

    L1-3 宇宙无敌加法器 - 令人激动的一道题目 感觉好久没有这么认真的做一道题了,今天看到一句话, 说是编程是一个工程型的工作,想要学好,"无他,唯手熟尔" 之前觉得自己笨,怀疑 ...

  7. pyspider—爬取视频链接

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2015-03-20 09:46:20 # Project: fly_spid ...

  8. 浅谈C#泛型的定义、继承、方法和约束

    摘要:本文介绍了如何定义一个C#泛型类,以及实现泛型类的继承.方法和约束. C#泛型参数化了类型,把类型作为参数抽象出来,从而使我们在实际的运用当中能够更好的实现代码的重复利用,同时它提供了更强的类型 ...

  9. Visual Studio 2010 C++ 属性设置基础

    在 <Visual Studio 2010 C++ 工程文件解读>中提到了C++工程中可以进行用户自定义的属性设置,如何进行属性设置呢? 下面我们来了解一下 props 文件的基本规则: ...

  10. Gtk基础学习总结(一)

    第一个GTK程序例子: #include <stdio.h> #include <gtk/gtk.h> int main(int argc, char *argv[]) { g ...