前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。

第一种方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <style>

        #wrap{

            display: table;

            width: 100%;

        }

        #wrap>div{

            display: table-cell;

            height: 800px;

        }

        #sidebar{

            width: 200px;

            background: red;

        }

        #contend{

            background: blue;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <div id="sidebar"></div>

        <div id="contend"></div>

    </div>

</body>

<script>

</script>

</html>

这种布局主要技术就是让div转变成table元素，让div标签拥有table，td标签的特点。

第二种方法

<!DOCTYPE>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!--<link rel="stylesheet" href="test.css" type="text/css">-->

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <style rel="stylesheet" type="text/css">

        html,body{

            padding: 0px;

            margin: 0px;

        }

        .one {

            float: left;

            height: 100px;

            width: 300px;

            background-color: blue;

        }

        .two {

            overflow: hidden;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<div class="one"></div>

<div class="two"></div>

</body>

<script>

    setTimeout(function () {

        $('.one').animate({width:0},500)

    },500)

</script>

</html>

这种布局左侧固定栏浮动，右侧div标签设置overflow:hidden | auto；div就不会伸到左侧固定栏的下面，碰到浮动元素就会停止。因为出发了div.normalDiv的BFC特性，具体不是很了解，有兴趣的可以自行百度。这样貌似嵌套一个父级div还不用清浮动......（没有测浏览器兼容问题）

第三种方法：

　　以后看到了，在追加。。。。。。如过有读者测试了这两个方法，请告知兼容问题，和其他问题。多谢。

html布局,左侧固定右侧自适应的更多相关文章

  1. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  2. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  3. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  4. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  5. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

  6. 一个简单的左侧固定右侧自适应demo

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

  7. CSS左侧固定右侧自适应

    方法一: float + margin.left{ float: left; width: 100px; }.right {margin-left:100px; } /*清除浮动*/ .contain ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. css左侧固定宽度右侧自适应

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

随机推荐

  1. 设置启动MyEclipse8.5的时候选择工作区间

    以前我的MyEclipse启动的时候默认都会进入到指定工作区间,比如:D:\MyEclipse,最近不知道怎么回事,每次启动的时候都是空的,必须要重新Switch Workspace选择一次 网上查找 ...

  2. js冒泡排序和二分查找

    冒泡排序: var arr=[5,0,-56,900,12,9000,-123,-1000]; var flag=false; for(var i=0;i<arr.length-1;i++){ ...

  3. Linq4j简明介绍

    Linq4j简明介绍 开发JAVA一段时间,面临的一大问题就是集合操作,习惯了LINQ的简洁语法,对JAVA的集合操作实在是无甚好感,只能通过C系的循环实现筛选等操作,由于没有延迟执行特性,内存占用实 ...

  4. Ajax实现天气预报功能

    实现天气预报功能 闲来无聊,写下此文 经常看见很多网站上有那种天气预报功能,自己之前也写过一个,不过属于那种涉及WCF服务引用那种,今天发现一个更为简单的方式来实现,使用Javascript和Ajax ...

  5. Emacs折腾经验谈

    Emacs折腾经验谈 这几天都没有动力写mongodb的东西,我果然还是太懒了么~ 主要是没有一个系统的东西整理出来,加上我令人拙计的语言表达能力,这个坑只能慢慢再补了. 最近在折腾emacs这个东西 ...

  6. 用curl访问HTTPS站点并登录

    开发网站,少不了测试.现在的网站为了加强安全性,都启用了HTTPS协议.所谓HTTPS,也就是HTTP文本在SSL协议中传输.用curl命令行来测试HTTPS站点是个很有用的功能,写点脚本,就可以做功 ...

  7. vps使用（centos）

    javaweb开发,vps来做个人测试 首先配置vps(centos) 1.安装javeweb环境 用ssh远程服务器后,中文乱码,因为ssh的字符集和服务器的字符集不一致,服务器是utf-8,可以通 ...

  8. Android插件简介

    /** * @actor Steffen.D * @time 2015.02.06 * @blog http://www.cnblogs.com/steffen */ Android插件简介 Andr ...

  9. 【高性能】生成唯一时间戳ID，1毫秒预计能生成1000个

    凡事涉及到高性能貌似都是高大上的东西,所以嘛我也试试:其实这个时间戳ID的生成主要为了解决我们公司内部的券号生成,估计有小伙伴认为券号生成有这么麻烦嘛,搞个自增ID完全可以用起来,或者时间取毫微米时间 ...

  10. Windows Server 2003下配置IIS6.0+php5+MySql5+PHPMyAdmin环境

    配置环境: 操作系统:Windows Server 2003 sp2企业版 Web服务器:系统自带的IIS6.0 所需工具: PHP:php-5.2.12-Win32.zip(官方网址:http:// ...