#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. RMI远程方法调用

    RMI远程方法调用:适用于 客户端 调用 服务器 内的方法:(Kotlin 语言编写) 如果业务为二个服务器之间的通信,还是得用消息队列的形式,因为RMI 不适合 双向 调用 下面介绍RMI 的使用方 ...

  2. 从零开始玩转JMX(三)——Model MBean

    Model MBean 相对于Standard MBean,Model MBean更加灵活.如果我们不能修改已有的Java类,那么使用Model MBean是不错的选择. Model MBean也是一 ...

  3. 如何在repeater中找到checkbox并实现全选删除

    checkbox使用客户端控件,且给repeater里边的checkbox添加ruanat＝server属性表头中的chkTotal的属性一定不要加此属性....然后 全选的javascript代码  ...

  4. easyui combobox 拼音检索快捷选择输入

    easyui combobox 拼音检索快捷选择输入 效果如图   $.ajax({ url: UserActionUrl + '?action=listuserworktype', dataType ...

  5. Vjudge - F - 比前面更简单的模拟

    2017-07-16 07:31:35 writer:pprp 题目介绍:很基础的string用法 题目如下: 读入一个字符串,字符串中包含ZOJ三个字符,个数不一定相等,按ZOJ的顺序输出,当某个字 ...

  6. Linux安装jdk、删除Open jdk

    1.将jdk解压安装完成后,在bin目录下查看当前jdk的版本号 命令: ./java -version 2.编辑修改配置 1. 修改profile文件 进入命令:   vi  /etc/profil ...

  7. Nginx 从0开始学

    作为一个 nginx 的初学者记录一下从零起步的点滴. 基本概念 Nginx 最常的用途是提供反向代理服务,那么什么反向代理呢?正向代理相信很多大陆同胞都在这片神奇的土地上用过了,原理大致如下图: 代 ...

  8. 推荐给开发者的11个PHP框架(转)

    PHP框架对于Web开发者来说是非常有用的工具,它可以帮助使用者更快.更容易的完成项目.根据调查,PHP仍是Web开发中最受欢迎和最实用的平台之一.当谈及Web开发时,很多人依然会选择使用PHP框架, ...

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

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

  10. Kotlin------流程控制语句

    流程控制语句是编程语言中的核心之一.可分为: 分支语句(if . when) 循环语句(for.while )和 跳转语句 (return . break .continue.throw)等. if表 ...