<!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. 「2014-3-18」multi-pattern string match using aho-corasick

    我是擅(倾)长(向)把一篇文章写成杂文的.毕竟,写博客记录生活点滴,比不得发 paper,要求字斟句酌八股结构到位:风格偏杂文一点,也是没人拒稿的.这么说来,arxiv 就好比是 paper 世界的博 ...

  2. [UCSD白板题 ]Small Fibonacci Number

    Problem Introduction The Fibonacci numbers are defined as follows: \(F_0=0\), \(F_1=1\),and \(F_i=F_ ...

  3. 主成分分析PCA的前世今生

    这篇博客会以攻略形式介绍PCA在前世今生. 其实,主成分分析知识一种分析算法,他的前生:应用场景:后世:输出结果的去向,在网上的博客都没有详细的提示.这里,我将从应用场景开始,介绍到得出PCA结果后, ...

  4. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  5. listview选中没有效果

    listview选中没有效果了,设置了android:listselector也没有效果,最后发现是listview中的item布局设置了背景颜色导致,把item的背景色去掉就OK了 http://b ...

  6. velocity整合servlet

    目录结构点我下载工程代码俩实体类不用说了看CustomerVelocityServlet类 package com.velocity.servlet;import java.util.ArrayLis ...

  7. 【leetcode】Merge Two Sorted Lists

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  8. poj 1702 三进制问题

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3906   Accepted: 1924 Description Eva h ...

  9. mongoDB研究笔记：复制集故障转移机制

    上面的介绍的数据同步(http://www.cnblogs.com/guoyuanwei/p/3293668.html)相当于传统数据库中的备份策略,mongoDB在此基础还有自动故障转移的功能.在复 ...

  10. 公共代码参考（httpclient）

    public class HttpClientUtils { private static final String CHARSET = "UTF-8"; /* * http ge ...