<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS两列高度自适应，右边自适应</title>

    <style>

        html,body{

            width:100%;

            height:100%;

        }

        body,div{

            margin:0;

            padding:0;

        }

        /*  这里之所以给margin-150px是为了减轻底部盒子的高度，不然盒子100%了 */

        #box{

            width:100%;

            height:100%;

            margin-top:-150px;

        }

        /* 浮动 */

        #box .left{

            float:left;

            width:300px;

            height:100%;

            margin-right:10px;

            background-color:red;

        }

        /* 利用前面的盒子浮动不占据位置，然后在通过overflow：hidden将两个盒子独立出来。 */

        #box .right{

            overflow:hidden;

            height:100%;

            background-color:pink;

        }

        #footer{

            position:absolute;

            bottom:0;

            left:0;

            width:100%;

            height:150px;

            background-color:#ccc;

        }

    </style>

</head>

<body>

    <div id="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div id="footer"></div>

</body>

</html>

CSS两列高度自适应，右边自适应的更多相关文章

  1. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  2. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  3. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  4. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  5. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  6. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. CSS两列及三列自适应布局方法整理

    布局 自适应 两列 三列 在传统方法的基础上加入了Flex布局并阐述各方法的优缺点,希望对大家有所帮助.先上目录: 两列布局:左侧定宽,右侧自适应 方法一:利用float和负外边距 方法二:利用外边距 ...

  8. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  9. css两列自适应布局的多种实现方式及原理。

    两列布局是非常常见的需求在实际项目中,实现的方式也有很多.究其原理也都不算复杂.这里主要提出几种实现方式和原理. html页面基本布局如下代码所示: 1 <div class="mai ...

随机推荐

  1. linux下配置ssledge代理服务器

    ssl edge 是一个非常好用的VPN/proxy, 比云梯 稳定快速的多.  在LINUX下开发 Titanium 需要用到各种FQ,所以它是必备工具. 1. 根据自己付费后的用户名和密码,下载 ...

  2. 在wifi状态下没有数据线，链接手机调试

    因为不知道是手机的问题还是数据线的问题,经常链接不上adb 所以找了一下wifi情况下,无线跟eclipse链接调试 第一步,首先你需要在你的手机上安装一个终端模拟器工具 第二步,在终端里输入(需要r ...

  3. phpcms v9 标签含义整理

    {template "content","header"}   ----------  调用根目录下phpcms\template\content\header ...

  4. "+" 是怎样连接字符串的？

    关于“+”运算符对字符串的连接,不同的平台在实现上可能会略有不同. 1. Oracle JDK1.7 当使用“+”对字符串进行连接时,会创建一个临时的StringBuilder对象,该对象调用appe ...

  5. 我的ORM之十三 -- 性能参数

    我的ORM索引 测试环境 台式机: 主板:映泰Z77 CPU:i5 3470(3.2GHz) 内存:DDR3 1600 8G(单条) 硬盘:创见 SSD 256G ORM从过程上,可以分两个大的部分: ...

  6. 细心很重要---猜猜这个SQL执行的什么意思

    今天在帮客户做语句优化的时候,突然遇到这样一个语句,类似下面的例子(原语句是个update) 例子中使用AdventureWorks数据中的两个表. productID 是[Production].[ ...

  7. iOS 视图，动画渲染机制探究

    腾讯Bugly特约作者:陈向文 终端的开发,首当其冲的就是视图.动画的渲染,切换等等.用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅.UI就是 App 的门面,它的体验 ...

  8. 人人都是 DBA（I）SQL Server 体系结构

    在了解 SQL Server 数据库时,可以先从数据库的体系结构来观察.SQL Server 的体系结构中包含 4 个主要组成部分: 协议层(Protocols) 关系引擎(Relational En ...

  9. java提高篇(九)-----实现多重继承

    多重继承指的是一个类可以同时从多于一个的父类那里继承行为和特征,然而我们知道Java为了保证数据安全,它只允许单继承.有些时候我们会认为如果系统中需要使用多重继承往往都是糟糕的设计,这个时候我们往往需 ...

  10. WAMPServer 默认安装启动后，图标显示橙黄色

    说明:我是在家的电脑上面学习的WAMPServer的,而家的电脑很干净.这次来学校以后,实验室的电脑被我经常的折磨,今天在安装以后,启动后,发现图标有红色到黄色,就停止了.其实,问题的根源很简单,某个 ...