css布局-内容自适应屏幕
css页面布局,实现内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部;当内容高度高于浏览器窗口高度时,页脚自动被撑到页面底部。
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.main {
overflow: hidden;
position: relative;
min-height: 100%;
background: #eee;
}
.red {
margin-bottom: 50px;
height: 200px;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
background: #0f0;
}
</style>
<body>
<div class="main">
<div class="red"></div>
<div class="footer"></div>
</div>
</body>
css布局-内容自适应屏幕的更多相关文章
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法
转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...
- css布局宽度自适应
随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...
- CSS布局--左侧自适应母元素高度
平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用js来设置,不仅不方便还会出现各种bug,后来就突然想到了一个好方法.有可能这方法已经被其他人用烂 ...
- css -- 背景图片自适应屏幕大小
由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...
- Day4 HTML新增元素与CSS布局
Day4 HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- 移动端 css/html (box-flex)自适应、等比布局
移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...
随机推荐
- CentOS随笔 - 修改CentOS7的IP
前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 在使用CentOS时经常我们需要固定一个IP, 因为服务器嘛,不固定IP. 难道每次都要配置开发环境的地址.? ...
- byr面经两则
人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...
- 【运维】linux命令查看端口占用情况,杀死进程,后台启动进程
1.查看端口占用情况:> lsof -i:port COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ...
- exchange 普通用户可以创建通讯组
运维发现,通讯组多了好多未知名称的,经查为普通用户通过owa新建的,怎么阻止用户新建通讯组呢. 在搭建exchange后,系统会自动创建一个“Default Role Assignment Polic ...
- css 笔记1
type="text/css"的作用是什么?它是CSS样式的标记.type->类型,这里是style的属性text/css ->文本/css,即css文本type=&q ...
- c++的路上,我坚信,我可以 -----第四次作业体会
第四次作业 传送门 1.浅谈"新对象"sstream和stack 第四次作业,就是在第三次作业上作修改,上周周末,我刚刚才完成了第三次作业,但是知道了队列如何应用,面对这次的sta ...
- 一次xss的黑盒挖掘和利用过程
挖掘过程一: 自从上一次投稿,已经好久好久没写文章了.今天就着吃饭的时间,写篇文章,记录下自己学习xss这么久的心得.在我看来.Xss就是javascript注入,你可以在js语法规定的范畴内做任何事 ...
- BZOJ 1588 营业额统计 set
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1588 题目大意: 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交 ...
- 基于HP DL388 Gen 9服务器基本配置(ESXI 6.5)
最近一段时间由于做毕业设计的原因,一直处于忙碌状态,刚做完毕业设计,导师处于项目的原因,买了一台惠普服务器(人民币1.7万),服务器自带的内存仅有16 G,硬盘也就只有600G,而且磁盘还做了raid ...
- 解决 php7下 igbinary_unserialize_ref: invalid reference 的bug
最近组内升级了PHP7,某个接口偶发502,看了下php的错误日志如下: igbinary_unserialize_ref: invalid reference >= Memcached::ge ...