#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. Python for循环文件

    for 循环遍历文件:打印文件的每一行 #!/usr/bin/env python fd = open('/tmp/hello.txt') for line in fd: print line, 注意 ...

  2. c++ 使用WinHTTP实现文件下载功能

    因为要项目中要想要实现一个软件自动更新的功能,之前是使用socket直接下载.但切换下载源的时候很麻烦.所以换用http方式. 网上找了很多资料,基本上就是下面几种: 1.curllib //功能强大 ...

  3. mvn设置

    mvn仓库网址: https://mvnrepository.com 安装好maven后,一定要确认安装路径下的setting.xml与本地仓库中的setting.xml一致. 坐标: 什么是坐标? ...

  4. [CF914D]Bash and a Tough Math Puzzle

    给定一个数列$a_1,a_2,...,a_n$,支持两种操作 1 l r x,猜测数列中[l,r]位置上的数的最大公约数$x$,判断这个猜测是否是接近正确的.如果我们可以在数列[l,r]位置中改动至多 ...

  5. MySQL 常用运算符

    1.算数运算符 加 mysql> select 1+2; 减 mysql> select 2-1; 乘 mysql> select 2*3; 除 mysql> select 5 ...

  6. [译]JavaScript需要类吗?

    [译]JavaScript需要类吗?   原文:http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/ 译者注:在 ...

  7. 【网络优化】Batch Normalization(inception V2) 论文解析(转）

    前言 懒癌翻了,这篇不想写overview了,公式也比较多,今天有(zhao)点(jie)累(kou),不想一点点写latex啦,读论文的时候感觉文章不错,虽然看似很多数学公式,其实都是比较基础的公式 ...

  8. 【cs231n】图像分类笔记

    前言 首先声明,以下内容绝大部分转自知乎智能单元,他们将官方学习笔记进行了很专业的翻译,在此我会直接copy他们翻译的笔记,有些地方会用红字写自己的笔记,本文只是作为自己的学习笔记.本文内容官网链接: ...

  9. Log4j 2.0 使用说明(1) 之HelloWorld

    以下是Log4j2.0的类图,以便大家对2.0有一个整体的理解. 就如我们学习任何一个技术一样,这里我们首先写一个Hello World: 1,新建工程TestLog4j 2,下载Log4j 2.0有 ...

  10. Git常用命令和Git团队使用规范指南

    转自:https://wsgzao.github.io/post/git/ 前言 在2005年的某一天,Linux之父Linus Torvalds 发布了他的又一个里程碑作品——Git.它的出现改变了 ...