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布局-内容自适应屏幕的更多相关文章

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

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

  2. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  3. 解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

    转载请声明出处(http://www.cnblogs.com/linguanh/) 一,先说下我的情况,大家可以对号入座(嫌无聊请跳过) 我的项目要求是这样的,先从数据库里面拿出来html标签,因为加 ...

  4. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

  5. CSS布局--左侧自适应母元素高度

    平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用js来设置,不仅不方便还会出现各种bug,后来就突然想到了一个好方法.有可能这方法已经被其他人用烂 ...

  6. css -- 背景图片自适应屏幕大小

    由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

  7. Day4 HTML新增元素与CSS布局

    Day4  HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...

  8. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  9. 移动端 css/html (box-flex)自适应、等比布局

    移动端 css/html (box-flex)自适应.等比布局 对于移动端自适应的一种布局方式. <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. CentOS随笔 - 修改CentOS7的IP

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 在使用CentOS时经常我们需要固定一个IP, 因为服务器嘛,不固定IP. 难道每次都要配置开发环境的地址.? ...

  2. byr面经两则

    人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...

  3. 【运维】linux命令查看端口占用情况，杀死进程，后台启动进程

    1.查看端口占用情况:> lsof -i:port COMMAND    PID    USER    FD    TYPE   DEVICE    SIZE/OFF    NODE  NAME ...

  4. exchange 普通用户可以创建通讯组

    运维发现,通讯组多了好多未知名称的,经查为普通用户通过owa新建的,怎么阻止用户新建通讯组呢. 在搭建exchange后,系统会自动创建一个“Default Role Assignment Polic ...

  5. css 笔记1

    type="text/css"的作用是什么?它是CSS样式的标记.type->类型,这里是style的属性text/css ->文本/css,即css文本type=&q ...

  6. c++的路上，我坚信，我可以 -----第四次作业体会

    第四次作业 传送门 1.浅谈"新对象"sstream和stack 第四次作业,就是在第三次作业上作修改,上周周末,我刚刚才完成了第三次作业,但是知道了队列如何应用,面对这次的sta ...

  7. 一次xss的黑盒挖掘和利用过程

    挖掘过程一: 自从上一次投稿,已经好久好久没写文章了.今天就着吃饭的时间,写篇文章,记录下自己学习xss这么久的心得.在我看来.Xss就是javascript注入,你可以在js语法规定的范畴内做任何事 ...

  8. BZOJ 1588 营业额统计 set

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1588 题目大意: 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交 ...

  9. 基于HP DL388 Gen 9服务器基本配置（ESXI 6.5）

    最近一段时间由于做毕业设计的原因,一直处于忙碌状态,刚做完毕业设计,导师处于项目的原因,买了一台惠普服务器(人民币1.7万),服务器自带的内存仅有16 G,硬盘也就只有600G,而且磁盘还做了raid ...

  10. 解决 php7下 igbinary_unserialize_ref: invalid reference 的bug

    最近组内升级了PHP7,某个接口偶发502,看了下php的错误日志如下: igbinary_unserialize_ref: invalid reference >= Memcached::ge ...