#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. 蓝桥杯练习——C++输出阶乘的最右边一位非零数

    #include<iostream> #include<iomanip> using namespace std; #define M 10000 #define N 1000 ...

  2. office使用技巧

    一.excel 1.在空格内换行:ALT+ENTER 2.打出勾:插入->符号

  3. JS输出表格头上的文字内容

    Array.from(document.querySelectorAll("#tb1 tr .cell")).map(it=>it.innerText)

  4. git gc内存错误的解决方案

    Auto packing the repository for optimum performance. You may alsorun "git gc" manually. Se ...

  5. MySQL 常用运算符

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

  6. 爬虫之Requests: 让 HTTP 服务人类

    Requests: 让 HTTP 服务人类 虽然Python的标准库中 urllib2 模块已经包含了平常我们使用的大多数功能,但是它的 API 使用起来让人感觉不太好,而 Requests 自称 “ ...

  7. linux（一）export的生命周期

    本文从shell执行的角度分析export变量的生命周期 # 只对当前shell环境起作用,比如通过不同的远程ssh就是不同的shell环境 export k=v 当运行一个.sh文件或者是shell ...

  8. hdu 4857 逃生 拓扑排序+逆向建图

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem Descr ...

  9. CDN方式使用iview

    如果没有使用webpack,可以使用我们提供的工具iview-theme来编译 首先需要安装主体生成工具,从npm全局活在项目中局部安装 以全局安装为例: npm install iview-them ...

  10. iOS 可变字符串NSMutableString的使用

    .创建一个可变字符串 NSMutableString * ms1 = [[NSMutableString alloc]init]; .可以通过类方法来创建 NSMutableString * ms2 ...