.main,.sitebar{
      height: 300px;
      font: bolder 20px/300px "微软雅黑";
      color: black;
      text-align: center;
}
.main{
      width: 100%;
      float: left;
}
.main .content{
      margin-left: 200px;
      background: red;
}
.sitebar{
      width: 200px;
      float: left;
      margin-left: -100%;
      background: green;
}
<div class="main">
      <div class="content">hhhhhhhhhhhhh</div>
</div>
<div class="sitebar">
      hehhehhe
</div>

两栏自适应布局，右侧div宽高不定的更多相关文章

  1. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  2. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  3. 利用float与overflow:hidden实现移动端两栏自适应布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  6. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  7. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  9. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗？

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

随机推荐

  1. React之setState()

    我们知道,在react中更新单个组件下state中的数据可以用setState()函数来实现,并且可以通过两种传参方式:对象.函数. 另外从文档中我们也可以了解到react可以将多个setState( ...

  2. 安装Oracle 11G Enterprise Manager工具

    1.登录ORACLE数据库 sqlplus / as sysdba; 2.查询实例名 SQL> select instance_name from v$instance; INSTANCE_NA ...

  3. js之留言字数限制

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

  4. manacher 算法 这个人确实写得太好了；

    O(n)回文子串(Manacher)算法 资料来源网络 参见:http://www.felix021.com/blog/read.php?2040 问题描述: 输入一个字符串,求出其中最大的回文子串. ...

  5. Linux Mint17.1安装PHPStorm8.0.2

    phpstorm是用JAVA开发的,所以在安装之前需要先安装jdk sudo apt-get install default-jdk 从官网上下载phpstorm 的linux版本 http://ww ...

  6. L2-017. 人以群分

    社交网络中我们给每个人定义了一个“活跃度”,现希望根据这个指标把人群分为两大类,即外向型(outgoing,即活跃度高的)和内向型(introverted,即活跃度低的).要求两类人群的规模尽可能接近 ...

  7. 关于上架AppStore最后一步的“出口合规信息”、“内容版权”、“广告标识符”的选择（转）

    这里只当作记录:http://blog.csdn.net/ashimar_a/article/details/51745675

  8. luvit 被忽视的lua 高性能框架（仿nodejs）

    备注:       luvit  开放模式和nodejs 一样,但是因为生态以及小众语言的问题,使用的人比较少,但是从目前     来看更新速度还是比较快的,但是从现有lua 开发框架来说一般倾向于使 ...

  9. mount: /dev/sdb already mounted or /sheepdog1 busy（multipath，wwid，uuid，udev）

    正常处理逻辑: 先umount /dev/sdb或是umount /backup如果还是显示的busy,你试试下面的方法fuser -m /dev/sdb查看一下是否sdb1正在被使用,或是有进程正在 ...

  10. centos7下安装oracle11gR2

    Centos7安装oracle11gR2说明 Centos7安装oracle11gR2说明 环境准备 安装Oracle前准备 创建运行oracle数据库的系统用户和用户组 创建oracle数据库安装目 ...