两栏布局,左侧固定宽度,右侧自适应大小

原创 2016年05月31日 23:02:51

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

第一种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;
}

第二种方式

*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
}

第二种方法,我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建:
float 的值不为 none
position 的值不为 static 或者 relative
display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
overflow 的值不为
visible

关于BFC,在w3c里是这样描述的:在BFC中,每个盒子的左外边框紧挨着 包含块 的 左边框 (从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的BFC。这样,当我们给右侧的元素单独创建一个BFC时,它将不会紧贴在包含块的左边框,而是紧贴在左元素的右边框。

版权声明:本文为博主原创文章,未经博主允许不得转载。

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)

两栏布局——实现左边固定,右边 自适应(右边固定,左边自适应)
  • dq_pp
  • dq_pp
  • 2017年04月18日 14:34
  • 1143

两栏自适应布局

实现效果:一边固定,一边自适应
  • zhu_free
  • zhu_free
  • 2016年04月29日 10:58
  • 2380

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

总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin,同时将padding的值设为正的margin值实现的 具体实现方...
  • charlene0824
  • charlene0824
  • 2016年04月22日 18:53
  • 1823

两栏等高布局||两栏自适应高度

常用两栏等高布局三种方法 这里梳理一下三种常用的两栏等高布局方法,如有谬误,欢迎指正 -、margin-bottom和padding-bottom html hello hello h...
  • qq_35639964
  • qq_35639964
  • 2017年02月24日 14:43
  • 1150

css布局之浮动模型&&左右两栏自适应布局

一个元素浮动时,其他内容会“环绕”该元素,浮动元素要设置一个width。浮动元素会自动生成一个块级框(行内元素会转成块级元素)。浮动元素规则浮动元素不能超过包含它的块的左右内边界。 浮动元素之前...
  • shelly1072
  • shelly1072
  • 2017年02月28日 00:25
  • 1009

用CSS实现布局(两栏布局,多栏布局)

在网页上的布局比较经典的是两栏布局和三栏布局。下面简单总结自己对这两种布局的实现过程。 两栏布局 两栏布局是主内容区为主,左(右)侧有一栏,代码如下: style> ...
  • bfboys
  • bfboys
  • 2016年10月06日 20:41
  • 449

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。 题目要求是右侧aside固定宽度200px,左侧content自适应。 本来直接用float,发现aside总是会...
  • qq846294282
  • qq846294282
  • 2016年12月20日 17:06
  • 1906

css实现左边div固定宽度,右边div自适应撑满剩下的宽度

Title .use-float>div:first-child{ width:100px; float:left; ...
  • anran_1211
  • anran_1211
  • 2018年01月11日 09:52
  • 212

overflow与flex同时使用发现的问题

这里讲一下,页面整体的布局都是用flex,即栅栏式布局,而用这个布局的好处是如果浏览器长度或者宽度手动调整,无需代码,页面会随之调整 而用flex为什么会与overflow扯上联系呢? 因为我要现实一...
  • wzm10455
  • wzm10455
  • 2016年01月06日 15:31
  • 2268

两列布局——左侧宽度固定,右侧宽度自适应的两种方法

今天做了一个练习,要求用两种方法来实现左侧宽度固定、右侧宽度自适应的两列布局。一开始我以为会很简单,毕竟只是练习,但是我写出了一种方法之后却没能顺利的写出第二种方法。对于网上的一些解决方法我还是不太满...
  • jiadluo
  • jiadluo
  • 2015年08月24日 15:35
  • 4057
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:两栏布局,左侧固定宽度,右侧自适应大小
举报原因:
原因补充:

(最多只允许输入30个字)