css

 *{margin:; padding:;list-style: none;}
.top{height: 100px;background-color:orange;}
.max{width: 100%;position:absolute;top: 100px;bottom:;background-color:skyblue;}

html

 <div class="top">
top
</div> <div class="max">
main
</div>

css布局一屏幕的自适应高度的更多相关文章

  1. css布局之头尾固定中间高度自适应

    被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...

  2. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  3. DIV+CSS布局时, DIV的高度和宽度特性

    这个没有特别的做要求,你要根据你自己的页面整体布局来设置,还有根据div的特性来设置,div默认情况是宽度最大化(100%).高度最小化,高度随着内容自动伸展: 一般情况做网页的话,大部分都是固定了总 ...

  4. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  5. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  6. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  7. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  9. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

随机推荐

  1. 【JMeter】如何用JMeter进行压力测试

    [JMeter]如何用JMeter进行压力测试(调试脚本已再猪猪微信的收藏中进行了收藏哦,名字叫exam-wow.jmx) 一.用badboy录制压测过程形成脚本另存为jmeter格式文档. 二.JM ...

  2. qsv转mp4

    1:下载格式工厂:http://rj.baidu.com/soft/detail/13052.html?ald 2:安装 :选择安装位置,把不需要安装的软件前面的对号去掉. 3:下一步,把不需要的软件 ...

  3. latex 安装和使用

    1:下载 texlivewindows 版  http://tug.org/texlive/acquire-netinstall.html 2:双击exe文件进行安装,安装时选择 将路径添加到环境变量 ...

  4. [py]py2自带Queue模块实现了3类队列

    py2自带Queue实现了3类队列 先搞清楚几个单词 Queue模块实现了三类队列: FIFO(First In First Out,先进先出,默认为该队列), 我们平时泛指的队列, LIFO(Las ...

  5. POJ:2049Finding Nemo(bfs+优先队列)

    http://poj.org/problem?id=2049 Description Nemo is a naughty boy. One day he went into the deep sea ...

  6. 【SVM】A Practical Guide to Support Vector Classi cation

    零.简介 一般认为,SVM比神经网络要简单. 优化目标:

  7. python输入与输出165

    s = 'Hello,Runoob' print(s) str(s) print(s) print(repr(s)) print(1/7) print(str(1/7)) print(repr(1/7 ...

  8. js值类型和引用类型的区别

    1:赋值 值类型的赋值:直接将存储的数据赋值一份进行赋值,两份数据在内存中是完全独立的. 引用类型赋值:引用类型的赋值的时候,是将变量中的存储的地址赋值一份单独存储,但是两个变量中修改其中一个对象,另 ...

  9. Visual Studio 2013旗舰版KEY

    Visual Studio 2013旗舰版KEY:BWG7X-J98B3-W34RT-33B3R-JVYW9

  10. mysql 替换函数replace()实现mysql 替换字符串

    mysql 替换字符串的实现方法:mysql中replace函数直接替换mysql数据库中某字段中的特定字符串,不再需要自己写函数去替换,用起来非常的方便,mysql 替换函数replace()Upd ...