<!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. 使用sklearn优雅地进行数据挖掘

    目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...

  2. Cassandra对读写请求的处理机制

    1 写请求: 单数据中心: 向所有副本发写请求, 所有副本都写数据, 只要有一致性水平指定数目的节点返回正确响应, 就认为写成功. 多数据中心: 客户端发起写数据请求后, 本地代理节点会把请求发给每个 ...

  3. sql server 基础语句

    创建数据库 创建之前判断该数据库是否存在 if exists (select * from sysdatabases where name='databaseName') drop database ...

  4. xpath实例 --//span[contains(.,'资讯管理')]

    实际例子: 实例一: 不得不说下第一个例子,谢谢selenium论坛的大神门,XPATH还有这种方式的定位,传说是“治疗一切跌打损伤,及text找不到”(Antony群友帮解决的,在此谢谢)

  5. mavan 常用命令

    Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ Maven常用命令: 1. 创建Maven的普通 ...

  6. Xamarin 跨移动端开发系列（01） -- 搭建环境、编译、调试、部署、运行

    如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!好了,废话不多说,就开始吧, ...

  7. Unity 热更新实例一、C#Light 和UI系统使用实例

    接下来我会运用热更新的机制,逐步制作一些例子来阐释脚本系统如何和Unity结合. 脚本不限于使用C#Lite,但是C#Lite会有一些便利之处,请往下看. 结合机制也不限于这一种,但是C#Lite的设 ...

  8. iOS——Core Animation 知识摘抄（二）

    阴影 主要是shadowOpacity .shadowColor.shadowOffset和shadowRadius四个属性 shadowPath属性 我们已经知道图层阴影并不总是方的,而是从图层内容 ...

  9. Win + D 和 Win + M的区别

    在Windows系统上,Win + D是显示桌面,Win + M是最小化所有窗口,咋一看,这两个快捷键貌似没有区别,但是在某些方面还是有细微的区别. 威力 从威力上来说,Win + D更牛逼一,因为显 ...

  10. Android 综合揭秘 —— 全面剖释 Service 服务

    引言 Service 服务是 Android 系统最常用的四大部件之一,Android 支持 Service 服务的原因主要目的有两个,一是简化后台任务的实现,二是实现在同一台设备当中跨进程的远程信息 ...