<!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命令之route - 显示和操作IP路由表

    转自:  http://codingstandards.iteye.com/blog/1125312 用途说明 route命令用于显示和操作IP路由表(show / manipulate the IP ...

  2. CAP定理

    from wikipedia CAP定理 CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致 ...

  3. 网页中插入FLASH（swf文件）的html代码

    一.简单插入flash图像<embed src="你的flash地址.swf"width="300" height="220"> ...

  4. swift的运算符

    1.什么是运算符?它有什么作用? 运算符是一种特定的符号或者表达式.它用来验证.修改.合并变量. 2.运算符有哪些? 运算符有很多,很多朋友学的很烦.这里我依据它的作用把它分为几块来介绍: a:赋值运 ...

  5. Java学习笔记四——运算符

    算术运算符 加减乘除(+.-.*./)就不说了. 求余运算符% 描述:第一个操作数除以第二个操作数,得到一个整除的结果后剩下的值就是余数 注意:求余预算的结果不一定总是整数,当操作数是浮点数时,结果可 ...

  6. Bootstrap 导航栏和登陆框

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

  7. wrHDL编译中软核代码初始化及编译耗时长的问题

    问题的提出整个WR的ISE工程比较大,编译时间很长,导致开发效率低.通过分析发现,ISE在综合的时候大量的时间都花在了初始化DPRAM上.调研发现Xilinx提供了BMM文件和DATA2MEM工具,可 ...

  8. 设置UIButton或者UILabel显示文字的行数

    需要在UIButton的titleLabel或者UILabel的text 字符串里面添加换行符号 “\n”,并且设置 UILabel的numberOfLines属性 栗子:行数要和“\n”的个数对应, ...

  9. String、String.valueOf、toString 它们三者的区别总结

    今天在使用这个的时候发现,他们三者好像在某些场所都是可以用的,但是不免会让人想到那既然它们三者这么的相似,那么总有些什么区别吧.我也在网上找了一些资料看.自己也看了API文档,就将他们三的区别总结一下 ...

  10. sqlserver 读取xml 字符串方法

    declare @xml xml declare @propertyName varchar(50)  declare @str nvarchar(max)   set @propertyName = ...