<!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修改主机名的方法

    linux修改主机名的方法 用hostname命令可以临时修改机器名,但机器重新启动之后就会恢复原来的值. #hostname   //查看机器名#hostname -i  //查看本机器名对应的ip ...

  2. SQL导入Excel文件

    如果表已存在,SQL语句为: insert into aa select * from OPENDATASOURCE('Microsoft.Jet.OLEDB.4.0', 'Data Source=D ...

  3. python 延迟绑定

    def multipliers(n): funcs = [] for i in range(n): def f(x): return x * i funcs.append(f) return func ...

  4. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  5. Windows服务器安全加固实战（Windows Server 2008 R2和Windows Server 2012）

    最近我们立方技术工作室在使用阿里云的过程中,发现服务器安全性也不是很高,而服务端的安全软件都很贵.为了为朋友们提供更加有效的解决方案,我们决定身体力行,高筑墙,大幅度提升服务器的安全防护级别! 主机安 ...

  6. iOS 直播类APP开发流程分解：

    1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.C ...

  7. 深入理解openstack网络架构(1)

    原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture 译文转载自:http://b ...

  8. objective-c（内存管理）

    本文主要记录objective-c 内存管理的知识点: 1.objective-c的对象都是分配内存在堆上,与C的mallock和C++的new类似,只有int等系统变量分配内存在栈上: 2.obje ...

  9. JavaScript使用DeviceOne开发实战（一） 配置和起步

    2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows ...

  10. 一种另类的解决URL中文乱码问题--对中文进行加密、解密处理

    情景:在资源调度中,首先用户需要选择工作目标,然后跟据选择的工作目标不同而选择不同的账号和代理ip.处理过程如下:点击选择账号,在js中获取工作目标对工作目标进行两次编码(encodeURI(enco ...