HTML结构如下:

<div id="main">
    <div id="top">top</div>
    <div id="body">body</div>
</div>
#top {
background-color: green;
width: 100%;
height: 50px;
}
#body {
background-color: red;
width: 100%;
position: absolute;
top: 50px;
bottom: 0px;
left: 0px;
}

  重点是要top和bottom一起使用,可以强制定义盒模型的区域

 

CSS解决高度自适应问题的更多相关文章

  1. css实现高度自适应

    要求.上部固定高度50px,下部分自适应剩下整个屏幕 html, body { height: 100%; margin: 0px; padding: 0px; } #main { backgroun ...

  2. css 图片高度自适应

    开始采用js,获取屏幕宽度,按宽高比来设置图片大小. var wid = window.screen.width; wid = wid * 0.85; $('.Img').css('width',wi ...

  3. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  4. 实现不同分辨率、不同浏览器下高度自适应、iframe高度自适应

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  5. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  6. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  7. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

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

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

  9. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

随机推荐

  1. .net自定义WebService WSDL

    最近工作需要向第三方提供一个WebService服务,坑爹的是第三方背景牛X,我方提供的服务必须完全遵照其客户端方预先定义好了的接口,一个符号都不允许修改. .net平台编写的WebService由于 ...

  2. Redis 连接问题

    .NET 中使用 StackExchange.Redis 我为什么想写这个,总感觉很多介绍相应技术的博客,只是把内容从官网搬到自己的博客中,没有任何的实践,这样会给想学的人,没有任何好处,也可能我是自 ...

  3. (.text+0x12): undefined reference to `rpl_fprintf'

    问题1:(.text+0x12): undefined reference to `rpl_fprintf'解决办法:在yacc前面添加%{#undef yyerrorvoid yyerror (ch ...

  4. SQL 常用的命令 (转)

    地址:http://www.cnblogs.com/longly/p/6030609.html 设置SQL语句所用的字符编码:set names UTF8; 判断指定的数据库是否存在:DROP DAT ...

  5. MVC项目中WebViewPage的实战应用

    由于公司的项目可能会卖到国外,所以需要支持多语言.今天我就在目前的项目中实现了多语言功能,下面记录我的具体实现. 1.相信很多朋友在用MVC做项目时候,都会遇到“视图必须派生自 WebViewPage ...

  6. 解决java compiler level does not match the version of the installed java project facet

    在项目目录的.setting文件夹下的org.eclipse.wst.common.project.facet.core.xml中 <installed facet="java&quo ...

  7. js实现的点击div区域外隐藏div区域(转)

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...

  8. nyoj 708 ones 动态规划

    http://acm.nyist.net/JudgeOnline/problem.php?pid=708 状态转移方程的思路:对于一个数N,可以是N - 1的状态+1 得到,另外,也可以是(n / 2 ...

  9. Java基础知识:代理

    一.代理的概念 动态代理技术是整个java技术中最重要的一个技术,它是学习java框架的基础,不会动态代理技术,那么在学习Spring这些框架时是学不明白的. 动态代理技术就是用来产生一个对象的代理对 ...

  10. 高斯模糊算法的 C++ 实现

    2008 年在一个 PS 讨论群里,有网友不解 Photoshop 的高斯模糊中的半径是什么含义,因此当时我写了这篇文章: 对Photoshop高斯模糊滤镜的算法总结: 在那篇文章中,主要讲解了高斯模 ...