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. 第2课 android机器人的翻页相册

    一.准备:准备像素大小相同的图片若干张.(本例中的图片,统一像素大小为310*310,请保存至本机电脑并按顺序命名为1.jpg至6.jpg) 二.启动与登陆: 启动谷歌浏览器,并在地址栏里输入loca ...

  2. UltraISO制作U盘启动盘教程

    Step 1: 首先需要安装UltraISO,完成安装后打开软碟通,文件->打开,打开我们的iso镜像 安装包可以百度搜索 Step 2:然后选择我们的U盘 Step 3:然后点击启动-> ...

  3. Python标准库：内置函数hasattr() getattr() setattr() 函数使用方法详解

    hasattr(object, name) 本函数是用来判断对象object的属性(name表示)是否存在.如果属性(name表示)存在,则返回True,否则返回False.参数object是一个对象 ...

  4. FTP上传和WEB上传的区别

       说区别之前,咱先说说什么是上传?上传就是将信息从个人计算机(本地计算机)传递到中央计算机(远程计算机)系统上,让网络上的人都能看到.将制作好的网页.文字.图片等发布到互联网上去,以便让其他人浏览 ...

  5. Linux 下Shell的学习

    1.Shell学习 1.什么是Shell    shell是一个命令解析器,在操作系统的最外层,负责和用户对话,将用户的输入解释给操作系统,并处理各种各样的操作系统的输出结果.2.什么是shell脚本 ...

  6. laravel with嵌套的渴求式加载

    今天在通过需求表A查询场地类型表B,然后通过表B的场地类型id去查询表C场地类型名的时候遇到了一个小的问题. 需求表A的字段:id.user_id .name等等: 中间表B的字段:id.appeal ...

  7. MongoDB命令及其MongoTemplate的混合讲解

    前言 前面讲解了如何在springboot中集成mongodb,本文将讲解mongodb命令操作及其MongoTemplate的使用.穿插的目的在于不用先去寻找mongodb的命令又去寻找在java中 ...

  8. Iptables教程

    iptables防火墙简介 Iptables也叫netfilter是Linux下自带的一款免费且优秀的基于包过滤的防火墙工具,它的功能十分强大,使用非常灵活,可以对流入.流出.流经服务器的数据包进行精 ...

  9. echarts柱状图，改变柱状颜色

    在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [ { name:'天数', type:'bar', stack: '天', data ...

  10. Python3安装scrapy框架步骤

    Python3安装scrapy框架步骤 1.       安装wheel a)     Pip install wheel 2.       安装lxml Pip install lxml 3.    ...